jump from a html page to another and then come back to certain part of parent html
2017-11-01 14:39
447 查看
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()" onclick="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()函数" onclick="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
例子：onclick="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="提交" onclick="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
(1)操作子窗口：frames[‘child’].contentDocument || frames[‘child’].document
1.首先获取iframe节点：
2
3
4
5
6
7
window对象的frames属性返回一个类似数组的对象，成员是所有子窗口的window对象。比如，frames[0]返回第一个子窗口。如果iframe设置了id或name，那么属性值会自动成为全局变量，并且可以通过window.frames属性引用，返回子窗口的window对象。
2.然后获取iframe包含的document对象:
IE浏览器：
其他浏览器：
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窗口。
2
3
4
父页面：
2
3
4
5
子页面：
2
3
4
5
父页面调取子页面内容：
2
3
子页面调取父页面内容：
http://blog.csdn.net/zhuchunyan_aijia/article/details/51377513
顺序： window--document--body--元素
1. 子iframe中调用父中方法 :xxx()
window.parent.xxx() 或者 parent.xxx()
2. 父调用子iframe 方法xxx()
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：
window.frames["ifrid"].contentWindow.document.getElementById("iframetext")；
jquery方式 ：$("#iframetext",上面三种方式的到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 :如下
<iframe name="sunPage" id="sunPage" src="sun.html" width="300px" height="auto"></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();
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()" onclick="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()函数" onclick="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
例子：onclick="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="提交" onclick="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;12
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');12.然后获取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;
}12
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;
}12
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 :如下
<iframe name="sunPage" id="sunPage" src="sun.html" width="300px" height="auto"></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();
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- the travel of solving iframe navigate to display page of certain part of parent html page
- Using ASP.NET and jQuery to Pass Multiple Values from a GridView to Another Page
- gridview.databind then return the html to another page
- html2canvas- Take Screenshot of Web Page and Save It to Server (Javascript and PHP)
- 本地提交SVN报错 提交文件 is not known to exist in the repository and is not part of the commit, yet its child
- Open Baidu webpage and type in Chinese characters to start searching, press “Back” button to go to B
- How To Retrieve the URL of a Web Page from an ActiveX Control
- This prevents urllib3 from configuring SSL appropriately and may cause certain SSL connections to fa
- call lua function from c and called back to c
- Configure file like format of ini and read data from ini file or write data to ini file
- Add custom and listview web part to wiki page using powershell
- [HTML] how to redirect to another page automactilly without js
- (Page 1 of 3 )A walking tour of JavaBeans What JavaBeans is, how it works, and why you want to use it
- flash 播放技术：jump to any part of the video
- My Solution to Lowest Common Ancestor of a Binary Tree Part II (Node has parent Pointer)
- (Page 2 of 3 )A walking tour of JavaBeans 2 :What JavaBeans is, how it works, and why you want to use it
- How to collect stats of apps from CloudFoundry and do analysis?
- call lua function from c and called back to c
- Not a million dollars ——a certain kind of ingenuity, discipline, and proactivity that most people seem to lack
- Convert IP addresses from a dots-and-number string to a struct in_addr and back