location.href這個東西常常用於跳轉，location既是window對象的屬性，又是document對象的屬性。
JavaScript hash 屬性 -- 返回URL中#符號後面的內容
JavaScript host 屬性 -- 返回網域名稱
JavaScript hostname 屬性 -- 返回主網域名稱
JavaScript href 屬性 -- 返回當前文檔的完整URL或設定當前文檔的URL
JavaScript pathname 屬性 -- 返回URL中網域名稱後的部分
JavaScript port 屬性 -- 返回URL中的連接埠
JavaScript protocol 屬性 -- 返回URL中的協議
JavaScript search 屬性 -- 返回URL中的查詢字串
JavaScript assign() 函數 -- 設定當前文檔的URL
JavaScript replace() 函數 -- 設定當前文檔的URL，並在history對象的地址清單中刪除這個URL
JavaScript reload() 函數 -- 重新載入當前文檔
JavaScript toString() 函數 -- 返回location對象href屬性當前的值
有幾種不同的調用方法，弄到自己有點亂，這次一次性寫個執行個體，完完全全不再混淆。本次用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.jb51.net/article/97882.htm"; //父親Iframe被跳轉 }) $("#top").click(function(){ top.location.href = "http://www.jb51.net/article/97882.htm"; //爺爺Iframe(最外層)被跳轉 }) $("#self").click(function(){ self.location.href = "http://www.jb51.net/article/97882.htm"; //自己跳轉 }) $("#parentparent").click(function(){ parent.parent.location.href = "http://www.jb51.net/article/97882.htm"; //爺爺IFrame跳轉,可以擷取到任意層級的父視窗 }) }) 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.jb51.net/article/97882.htm"; window.frames["Son"].location = "http://www.jb51.net/article/97882.htm"; }) $("#SonFunction").click(function(){ window.frames["Son"].ParentRun(); //IE支援,google發布後)支援(檔案系統中不支援) }) $("#ParentFunction").click(function(){ parent.SonRun(); //IE支援,google發布後支援(檔案系統中不支援) }) })</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跳轉" /><input type="button" id="SonFunction" value="調用子視窗函數"><input type="button" id="ParentFunction" value="調用父視窗函數"></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操作。
以上就是本文的全部內容，希望對大家有所協助，謝謝對雲棲社區的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
