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

最新推荐文章于 2021-10-27 16:15:53 发布

nedwons

最新推荐文章于 2021-10-27 16:15:53 发布

阅读量453

点赞数

本文链接：https://blog.csdn.net/hunter___/article/details/78413893

版权

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.csdn.net/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.csdn.net/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.csdn.net/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.csdn.net/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>  

效果图：

http://blog.csdn.net/seven0404/article/details/52584505

1.父窗口对子窗口操作

刷新：

document.getElementById("IframeID").src=document.getElementById("IframeID").src+"?_="+Math.random();

上面这种方法有时需要对“src”属性处理一下。

取值：

//父窗口取子窗口的值

GetValue("Iframe1","IframeDiv");

赋值：

//父窗口设置窗口元素的值;

SetValue("Iframe1","IframeDiv");

2.子窗口操作父窗口

刷新：

(1)、window.parent.location.href=window.parent.location.href;

(2)、window.parent.location.reload();

(3)、大家可以补充

取值：

alert(window.parent.document.getElementById("IframeDiv").innerHTML);

赋值：

window.parent.document.getElementById("IframeDiv").innerHTML="我是从子窗口IFRAME传过来的值";

关闭：

window.parent.opener=null;//如果不加这句，会提示关闭询问窗口;

window.parent.close();

http://blog.csdn.net/WD4871/article/details/50517597

父页面中的iframe :如下

1.父iframe 调用子iframe的方法

    $("#sunPage")[0].contentWindow.sunMethod();
      contentWindow 对象可以获取子iframe的window对象,兼容所有浏览器.
      sunMethod() 这是子iframe中的方法名.

如果iframe的id不知道，比如用jbox 的open方法打开一个ifram.可以借助jquery的find方法找到iframe节点。

如：$(selector).find("iframe")[0].contentWondow.sunMethod();

2.父iframe 修改子iframe标签中的数据:如修改子iframe中的input的值.

$('#sunPage').contents().find("#sunP").text("dsssssdd");

jQuery contents() 方法: http://www.w3school.com.cn/jquery/traversing_contents.asp 介绍
ID #sunP 是子iframe中的input的id;

3.子iframe调用父iframe中的方法

    window.parent.daoYo("asdadasds");
    window.parent 直接调用window对象的parent
     daoYo("asdadasds"); 父页面的方法名,可传参数;

4, 子iframe 修改父iframe标签中的数据:如修改父iframe中的input的值.
这个就不用说了.

window.parent.$("#button3").text("ssssssssssss");

1.父窗口对子窗口操作

刷新：

document.getElementById("IframeID").src=document.getElementById("IframeID").src+"?_="+Math.random();

上面这种方法有时需要对“src”属性处理一下。

取值：

//父窗口取子窗口的值

GetValue("Iframe1","IframeDiv");

赋值：

//父窗口设置窗口元素的值;

SetValue("Iframe1","IframeDiv");

2.子窗口操作父窗口

刷新：

(1)、window.parent.location.href=window.parent.location.href;

(2)、window.parent.location.reload();

(3)、大家可以补充

取值：

alert(window.parent.document.getElementById("IframeDiv").innerHTML);

赋值：

window.parent.document.getElementById("IframeDiv").innerHTML="我是从子窗口IFRAME传过来的值";

关闭：

window.parent.opener=null;//如果不加这句，会提示关闭询问窗口;

window.parent.close();

nedwons

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jump from a html page to another and then come back to certain part of parent html

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 to jump where i want ,but it is inner html1,the question is that ,th
复制链接

扫一扫