淺析location.href跨窗口調(diào)用函數(shù)
location.href這個東西常常用于跳轉(zhuǎn),location既是window對象的屬性,又是document對象的屬性。
JavaScript hash 屬性 -- 返回URL中#符號后面的內(nèi)容
JavaScript host 屬性 -- 返回域名
JavaScript hostname 屬性 -- 返回主域名
JavaScript href 屬性 -- 返回當前文檔的完整URL或設(shè)置當前文檔的URL
JavaScript pathname 屬性 -- 返回URL中域名后的部分
JavaScript port 屬性 -- 返回URL中的端口
JavaScript protocol 屬性 -- 返回URL中的協(xié)議
JavaScript search 屬性 -- 返回URL中的查詢字符串
JavaScript assign() 函數(shù) -- 設(shè)置當前文檔的URL
JavaScript replace() 函數(shù) -- 設(shè)置當前文檔的URL,并在history對象的地址列表中刪除這個URL
JavaScript reload() 函數(shù) -- 重新載入當前文檔
JavaScript toString() 函數(shù) -- 返回location對象href屬性當前的值
有幾種不同的調(diào)用方法,弄到自己有點亂,這次一次性寫個實例,完完全全不再混淆。本次用3個頁面解決問題:
3.html 本窗口:
<html> <head> <title>js</title> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(function(){ $("#parent").click(function(){ parent.location.href = "http://www.dbjr.com.cn/article/97882.htm"; //父親Iframe被跳轉(zhuǎn) }) $("#top").click(function(){ top.location.href = "http://www.dbjr.com.cn/article/97882.htm"; //爺爺Iframe(最外層)被跳轉(zhuǎn) }) $("#self").click(function(){ self.location.href = "http://www.dbjr.com.cn/article/97882.htm"; //自己跳轉(zhuǎn) }) $("#parentparent").click(function(){ parent.parent.location.href = "http://www.dbjr.com.cn/article/97882.htm"; //爺爺IFrame跳轉(zhuǎn),可以獲取到任意層級的父窗口 }) }) function ParentRun() { alert("兒子IFrame方法!"); } </script> </head> <body> 我是兒子! <input type="button" id="parent" value="parent.location.href" /> <input type="button" id="top" value="top.location.href" /> <input type="button" id="self" value="self.location.href" /> <input type="button" id="parentparent" value="parentparent.location.href" /> </body> </html>
2.html 父窗口:
<html> <head> <title>js??</title> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(function(){ $("#Outermost").click(function(){ //判斷當前IFrame是否是最外層頁面 if (top.location == self.location) { alert("本Iframe是最外層框架"); } else{ alert("本Iframe不是最外層框架"); //這個被彈出 } }) $("#Son").click(function(){ //window.frames[0].location = "http://www.dbjr.com.cn/article/97882.htm"; window.frames["Son"].location = "http://www.dbjr.com.cn/article/97882.htm"; }) $("#SonFunction").click(function(){ window.frames["Son"].ParentRun(); //IE支持,google發(fā)布后)支持(文件系統(tǒng)中不支持) }) $("#ParentFunction").click(function(){ parent.SonRun(); //IE支持,google發(fā)布后支持(文件系統(tǒng)中不支持) }) }) </script> </head> <body> 我是父親! <iframe src="3.html" name="Son" style="width:300px; height:300px;" ></iframe> <input type="button" id="Outermost" value="判斷當前IFrame是否最外層" /> <input type="button" id="Son" value="控制兒子IFrame跳轉(zhuǎn)" /> <input type="button" id="SonFunction" value="調(diào)用子窗口函數(shù)"> <input type="button" id="ParentFunction" value="調(diào)用父窗口函數(shù)"> </body> </html>
1.html 爺窗口:
<html> <head> <title>js</title> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(function(){ alert(window.location == document.location); //輸出 true }) function SonRun() { alert("爺爺IFrame方法!"); } //http://localhost:666/1.html?id=1&name=%E5%BC%A0%E4%B8%89#menu document.write(location.hash + "<br/>"); // #menu document.write(location.host + "<br/>"); // localhost:666 document.write(location.hostname + "<br/>"); // localhost document.write(location.pathname + "<br/>"); // /1.html document.write(location.port + "<br/>"); // 666 document.write(location.protocol + "<br/>"); // http: document.write(location.search + "<br/>"); // ?id=1&name=%E5%BC%A0%E4%B8%89 document.write(location.assign + "<br/>"); // function () { [native code] } </script> </head> <body> 我是最爺爺(最外層)! <iframe src="2.html" style="width:500px; height:500px;" ></iframe> </body> </html>
三個頁面放在同一個目錄,隨便點下就知道怎么回事了!
jQuery對IFrame的操作主要是通過
$("iframe").contents().find("#id1");
進行跨IFrame操作。
以上就是本文的全部內(nèi)容,希望對大家有所幫助,謝謝對腳本之家的支持!
- JS的location.href跳出框架打開新頁面的方法
- IE下通過a實現(xiàn)location.href 獲取referer的值
- window.location.href的用法(動態(tài)輸出跳轉(zhuǎn))
- location.href用法總結(jié)(最主要的)
- window.navigate 與 window.location.href 的使用區(qū)別介紹
- js實現(xiàn)網(wǎng)頁防止被iframe框架嵌套及幾種location.href的區(qū)別
- window.location.href = window.location.href 跳轉(zhuǎn)無反應(yīng) a超鏈接onclick事件寫法
- js獲取location.href的參數(shù)實例代碼
- location.href 在IE6中不跳轉(zhuǎn)的解決方法與推薦使用代碼
- JS 中document.URL 和 windows.location.href 的區(qū)別
相關(guān)文章
uni-app和原生小程序混合開發(fā)的具體實現(xiàn)過程
最近項目中遇到了一些功能需要與原生進行混合開發(fā),所以下面這篇文章主要給大家介紹了關(guān)于uni-app和原生小程序混合開發(fā)的具體實現(xiàn)過程,需要的朋友可以參考下2022-07-07使用mock.js隨機數(shù)據(jù)和使用express輸出json接口的實現(xiàn)方法
這篇文章主要介紹了使用mock.js隨機數(shù)據(jù)和使用express輸出json接口的實現(xiàn)方法,需要的朋友可以參考下2018-01-01JS中的兩種數(shù)據(jù)類型及實現(xiàn)引用類型的深拷貝的方法
大家都知道在JS中數(shù)據(jù)類型按照訪問方式和存儲方式的不同可分為基本類型和引用類型。這篇文章主要介紹了JS中的兩種數(shù)據(jù)類型以及實現(xiàn)引用類型的深拷貝 ,需要的朋友可以參考下2018-08-08