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="https://www.jb51.net/jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(function(){ $("#parent").click(function(){ parent.location.href = "https://www.jb51.net/article/97882.htm"; //父亲Iframe被跳转 }) $("#top").click(function(){ top.location.href = "https://www.jb51.net/article/97882.htm"; //爷爷Iframe(最外层)被跳转 }) $("#self").click(function(){ self.location.href = "https://www.jb51.net/article/97882.htm"; //自己跳转 }) $("#parentparent").click(function(){ parent.parent.location.href = "https://www.jb51.net/article/97882.htm"; //爷爷IFrame跳转,可以获取到任意层级的父窗口 }) }) function ParentRun() { alert("儿子IFrame方法!"); } </script> </head> <body> 我是儿子! <input type="button" value="parent.location.href" /> <input type="button" value="top.location.href" /> <input type="button" value="self.location.href" /> <input type="button" value="parentparent.location.href" /> </body> </html>
2.html 父窗口：
<html> <head> <title>js??</title> <script type="text/javascript" src="https://www.jb51.net/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 = "https://www.jb51.net/article/97882.htm"; window.frames["Son"].location = "https://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="https://www.jb51.net/article/3.html" ></iframe> <input type="button" value="判断当前IFrame是否最外层" /> <input type="button" value="控制儿子IFrame跳转" /> <input type="button" value="调用子窗口函数"> <input type="button" value="调用父窗口函数"> </body> </html>
1.html 爷窗口：
<html> <head> <title>js</title> <script type="text/javascript" src="https://www.jb51.net/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="https://www.jb51.net/article/2.html" ></iframe> </body> </html>
三个页面放在同一个目录，随便点下就知道怎么回事了!
jQuery对IFrame的操作主要是通过
$("iframe").contents().find("#id1");
进行跨IFrame操作。