jump from a html page to another and then come back to certain part of parent html

最新推荐文章于 2023-11-01 00:09:21 发布

nedwons

最新推荐文章于 2023-11-01 00:09:21 发布

阅读量549

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/hunter___/article/details/78413893

本文详细介绍如何在不同浏览器中实现父窗口与IFrame子窗口之间的数据交互及页面控制，包括跨域限制下的通信策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

the project need to get that click at the link in certein part which also is a html2 file showed in the html1 project .

i use the <a herf=....> to jump where i want ,but it is inner html1,the question is that ,the page should close the html2 and jump to certain part of the html1.

thinking :

1.close the html2 flie---->turn to certain part of html1

A.click

B.send a value

C.close the iframe

D.navigate to a certain part of parent html1

thinking 2:

use js to control the jump of that page which contain iframe and html file viem in it .

and if i click at that html link and i jump to display hall.

a javascript function of control :

what i need now is that ,

the control example of an html inner a iframe to return a variable.

piano programmer,coding as if play music.

some document about iframe :

http://blog.youkuaiyun.com/yusewuhen/article/details/18571157

一、父窗口调用iframe子窗口方法
1、HTML语法：<iframe name="myFrame" src="child.html"></iframe>
2、父窗口调用子窗口：myFrame.window.functionName();
3、子窗品调用父窗口：parent.functionName();
简单地说,也就是在子窗口中调用的变量或函数前加个parent.就行
4、父窗口页面源码：

复制代码代码如下:

 
 <html> 
 
 <head> 
 
 <script type="text/javascript"> 
 
 function say() { 
 
 alert("parent.html------>I'm at parent.html"); 
 
 } 
 
 function callChild() 
 
 { 
 
 //document.frames("myFrame").f1(); 
 
 myFrame.window.say(); 
 
 } 
 
 </script> 
 
 </head> 
 
 <body> 
 
 <input type=button value="调用child.html中的函数say()" οnclick="callChild()"> 
 
 <iframe name="myFrame" src="child.html"></iframe> 
 
 </body> 
 
 </html>

5、子窗口页面：

复制代码代码如下:

 
 <html> 
 
 <head> 
 
 <script type="text/javascript"> 
 
 function say() 
 
 { 
 
 alert("child.html--->I'm at child.html"); 
 
 } 
 
 function callParent() { 
 
 parent.say(); 
 
 } 
 
 </script> 
 
 </head> 
 
 <body> 
 
 <input type=button value="调用parent.html中的say()函数" οnclick="callParent()"> 
 
 </body> 
 
 </html>

二、iframe 父窗口和子窗口相互的调用方法
1、IE中使用方法：
父窗口调用子窗口：iframe_ID.iframe_document_object.object_attribute = attribute_value
例子：onClick="iframe_text.myH1.innerText='http://www.pint.com';"
子窗口调用父窗口：parent.parent_document_object.object_attribute = attribute_value
例子：οnclick="parent.myH1.innerText='http://www.pint.com';"
2、Firefox中使用方法：
上面在IE下没有问题，但在firefox下不正常。在firefox下，应该是如下调用方法：
父窗口调用子窗口：window.frames["iframe_ID"].document.getElementById("iframe_document_object").object_attribute = attribute_value
例： window.frames["iframe_text"].document.getElementById("myH1").innerHTML= "http://hi.jb51.net";
子窗口调用父窗口：parent.document.getElementById("parent_document_object").object_attribute = attribute_value
例： parent.document.getElementById("myH1").innerHTML = "http://jb51.net";
3、完整的例子
test.htm

复制代码代码如下:

 
 <HTML> 
 
 <HEAD> 
 
 <TITLE> Test Page </TITLE> 
 
 <script src="prototype-1.4.0.js"></script> 
 
 <script language="javascript"> 
 
 function show() 
 
 { 
 
 window.frames["iframe_text"].document.getElementById("myH1").innerHTML = "http://hi.jb51.net"; 
 
 } 
 
 </script> 
 
 </HEAD> 
 
 <BODY> 
 
 <iframe height="350" width="600" src="iframe_test.htm" name="iframe_text"></iframe> 
 
 <form action="" method="post"> 
 
 <input name="haha" id="haha" type="text" maxlength="30" value="haha" /> 
 
 <br /> 
 
 <textarea cols="50" rows="5" id="getAttributeMethod"></textarea> 
 
 <input type="button" onClick="show();" value="提交"/> 
 
 </form> 
 
 <h1 id="myH1">d</h1> 
 
 </BODY> 
 
 </HTML>

frame_test.htm

复制代码代码如下:

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
 <html xmlns="http://www.w3.org/1999/xhtml"> 
 
 <head> 
 
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 
 <title>无标题文档</title> 
 
 </head> 
 
 <script language="javascript"> 
 
 function show() 
 
 { 
 
 parent.document.getElementById("myH1").innerHTML = http://jb51.net; 
 
 } 
 
 </script> 
 
 <body> 
 
 <h1 id="myH1">ha</h1> 
 
 <form action="" method="post"> 
 
 <input name="abc" id="abc" type="text" maxlength="30" value="abc" /> 
 
 <br /> 
 
 <textarea cols="50" rows="10" id="text"></textarea> 
 
 <br /> 
 
 <input type="button" value="提交" οnclick="show();"/> 
 
 </form> 
 
 </body> 
 
 </html>

test.htm里面firefox下访问iframe 必须用name，不能用id，所以要改为name="iframe_test" 。(http://chenling1018.blog.163.com/blog/static/1480254200811891041694/)

http://blog.youkuaiyun.com/lunhuihan/article/details/64443658

一、iframe标签详解

<iframe src="1.html" frameborder="0" id="child"></iframe>
   1

(1)操作子窗口：frames[‘child’].contentDocument || frames[‘child’].document

1.首先获取iframe节点：

 var myIframe = document.getElementById('child');
    或
    var myIframe = frames['child']; 
    或
    var myIframe = window.frames['child'];
    或
    var myIframe = child;
   1
2
3
4
5
6
7

window对象的frames属性返回一个类似数组的对象，成员是所有子窗口的window对象。比如，frames[0]返回第一个子窗口。如果iframe设置了id或name，那么属性值会自动成为全局变量，并且可以通过window.frames属性引用，返回子窗口的window对象。

    window.frames['child'] === frames['child'] === child === document.getElementById('child');
   1

2.然后获取iframe包含的document对象:

IE浏览器：

    var childDocument = myIframe.document;
   1

其他浏览器：

    var childDocument = myIframe.contentWindow.document;    
    或
    var childDocument = myIframe.contentDocument;
   1
2
3

contentWindow属性获得iframe节点包含的window对象，
contentDocument属性获得包含的document对象，等价于contentWindow.document

注意：iframe元素遵守同源政策，只有当父页面与框架页面来自同一个域名，两者之间才可以用脚本通信，否则只有使用window.postMessage方法。

(2)操作父窗口：iframe.parent
iframe窗口内部，使用window.parent引用父窗口。如果当前页面没有父窗口，则window.parent属性返回自身。因此，可以通过window.parent是否等于window.self，判断当前窗口是否为iframe窗口。

if (window.parent !== window.self) {
    //当前窗口是子窗口
    var parentDocument = window.parent.document;
}
   1
2
3
4

二、iframe中父子窗口操作实例

父页面：

<body>
<div id="myList">
</div>
<iframe src="1.html" frameborder="0" id="child"></iframe>
</body>
   1
2
3
4
5

子页面：

<body>
<div id="content">
这是子页面
</div>
</body>
   1
2
3
4
5

父页面调取子页面内容：

frames['child'].onload = function () {
    var childDocument = this.contentDocument || this.document;   
}
   1
2
3

子页面调取父页面内容：

if (window.parent !== window.self) {
    var parentDocument = window.parent.document;
}

http://blog.youkuaiyun.com/zhuchunyan_aijia/article/details/51377513

顺序： window--document--body--元素

1. 子iframe中调用父中方法 :xxx()

window.parent.xxx() 或者 parent.xxx()

2. 父调用子iframe 方法xxx()

<iframe src="index2.html" scrolling="no" name="iframeName" id="ifrid"></iframe>

window.iframeName.xxx();

或者

var ifr = document.getElementById("ifrid");

ifr.contentWindow.xxx();

小结：调用方法需要用window

3.子iframe得到父的元素<span id="spantext">hello</span>

js: window.parent.document.getElementById("spantext")

jquery:$("#spantext",window.parent.document)

4. 父获取子iframe元素三种方式

方式1：

var ifm = document.getElementById("ifrid");

ifm.contentWindow.document.getElementById("iframetext")
方式2：ifr 是iframe的name值

window.ifr.document.getElementById("iframetext")；
方式3：ifrid是iframe 的id值

window.frames["ifrid"].contentWindow.document.getElementById("iframetext")；

jquery方式：$("#iframetext",上面三种方式的到document（

ifm.contentWindow.document

）)

总结：获取iframe，然后window-document

http://blog.youkuaiyun.com/baidu_25943379/article/details/50997282

假设我们有两个网页a.html和b.html，在a页面中点击一个超链接或者按钮跳转到b页面，并传递一个地址给b页面，b页面接收到地址后进行跳转到接收的地址

首先，在a页面中插入一个超链接

[html]view plain copy 
   
 <a href=跳转的页面?参数名=值>超链接名称，随便填</a>  
 例如  
 <a href="b.html?test=http://www.baidu.com">百度</a>  

然后在b页面用js接收传递的值

[javascript]view plain copy 
   
 <script>  
 function getParameter(param)    
     {    
         var query = window.location.search;//获取URL地址中？后的所有字符    
         var iLen = param.length;//获取你的参数名称长度    
         var iStart = query.indexOf(param);//获取你该参数名称的真实索引    
         if (iStart == -1)//-1为没有该参数    
             return "";    
         iStart += iLen + 1;    
         var iEnd = query.indexOf("&", iStart);//获取第二个参数的其实索引    
         if (iEnd == -1)//只有一个参数    
             return query.substring(iStart);//获取单个参数的参数值    
         return query.substring(iStart, iEnd);//获取第二个参数的值    
     }    
     
 function link_jump()  
 {  
     var param = getParameter("test");    
       
     if(param!=""){       //如果传递的值不等于空就跳转  
         location.href=param;    
     }  
       
 }  
   
 //延时1S跳转，可自行修改延时时间  
 setTimeout(link_jump, 1000);  
 </script>  