浅析location.href跨窗口调用函数
location.href这个东西常常用于跳转,location既是window对象的属性,又是document对象的属性。
JavaScripthash属性--返回URL中#符号后面的内容
JavaScripthost属性--返回域名
JavaScripthostname属性--返回主域名
JavaScripthref属性--返回当前文档的完整URL或设置当前文档的URL
JavaScriptpathname属性--返回URL中域名后的部分
JavaScriptport属性--返回URL中的端口
JavaScriptprotocol属性--返回URL中的协议
JavaScriptsearch属性--返回URL中的查询字符串
JavaScriptassign()函数--设置当前文档的URL
JavaScriptreplace()函数--设置当前文档的URL,并在history对象的地址列表中删除这个URL
JavaScriptreload()函数--重新载入当前文档
JavaScripttoString()函数--返回location对象href属性当前的值
有几种不同的调用方法,弄到自己有点乱,这次一次性写个实例,完完全全不再混淆。本次用3个页面解决问题:
3.html本窗口:
<html> <head> <title>js</title> <scripttype="text/javascript"src="jquery-1.6.2.min.js"></script> <scripttype="text/javascript"> $(function(){ $("#parent").click(function(){ parent.location.href="https://www.nhooo.com/article/97882.htm";//父亲Iframe被跳转 }) $("#top").click(function(){ top.location.href="https://www.nhooo.com/article/97882.htm";//爷爷Iframe(最外层)被跳转 }) $("#self").click(function(){ self.location.href="https://www.nhooo.com/article/97882.htm";//自己跳转 }) $("#parentparent").click(function(){ parent.parent.location.href="https://www.nhooo.com/article/97882.htm";//爷爷IFrame跳转,可以获取到任意层级的父窗口 }) }) functionParentRun() { alert("儿子IFrame方法!"); } </script> </head> <body> 我是儿子! <inputtype="button"id="parent"value="parent.location.href"/> <inputtype="button"id="top"value="top.location.href"/> <inputtype="button"id="self"value="self.location.href"/> <inputtype="button"id="parentparent"value="parentparent.location.href"/> </body> </html>
2.html父窗口:
<html> <head> <title>js??</title> <scripttype="text/javascript"src="jquery-1.6.2.min.js"></script> <scripttype="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.nhooo.com/article/97882.htm"; window.frames["Son"].location="https://www.nhooo.com/article/97882.htm"; }) $("#SonFunction").click(function(){ window.frames["Son"].ParentRun();//IE支持,google发布后)支持(文件系统中不支持) }) $("#ParentFunction").click(function(){ parent.SonRun();//IE支持,google发布后支持(文件系统中不支持) }) }) </script> </head> <body> 我是父亲! <iframesrc="3.html"name="Son"style="width:300px;height:300px;"></iframe> <inputtype="button"id="Outermost"value="判断当前IFrame是否最外层"/> <inputtype="button"id="Son"value="控制儿子IFrame跳转"/> <inputtype="button"id="SonFunction"value="调用子窗口函数"> <inputtype="button"id="ParentFunction"value="调用父窗口函数"> </body> </html>
1.html爷窗口:
<html> <head> <title>js</title> <scripttype="text/javascript"src="jquery-1.6.2.min.js"></script> <scripttype="text/javascript"> $(function(){ alert(window.location==document.location);//输出true }) functionSonRun() { 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(){[nativecode]} </script> </head> <body> 我是最爷爷(最外层)! <iframesrc="2.html"style="width:500px;height:500px;"></iframe> </body> </html>
三个页面放在同一个目录,随便点下就知道怎么回事了!
jQuery对IFrame的操作主要是通过
$("iframe").contents().find("#id1");
进行跨IFrame操作。
以上就是本文的全部内容,希望对大家有所帮助,谢谢对毛票票的支持!