【javascript】javascript中父页面与子页面互传值

最新推荐文章于 2022-10-18 20:53:07 发布

yanhui_wei

最新推荐文章于 2022-10-18 20:53:07 发布

阅读量1.5k

点赞数

分类专栏：【javascript深入研究】

【javascript深入研究】专栏收录该内容

35 篇文章 1 订阅

订阅专栏

之前还真没做过类似的东西，，top页面获取子页面的document。。

在百度搜了下即找到这个东东，还好，能用。

主要就是使用 contentWindow方法，获取子页面的所有document，再做处理。

通过js从父页面获取子页面的值

通常在很多情况下都会遇到通过js来传值的问题，只要通过一些页面关联，他们的值就可以互相传递，其中应用框架的时候传值问题可能会遇到更多一些

1、从父页面传值到子页面可能很容易办到，在很多情况下可以不通过js来传就可以达到目的，但从子页面把数据传给父页面就不是那么容易了，其实思路很简单，首先你要通过父页面找到子页面，按照W3C标准来，语法如下：

`1`	`document.getElementById('iframe1').contentWindow;`

取到子页面对象

2、此文为了达到一个很醒目的效果，做了一个很即时的例子，当鼠标选中子页面的任何文字的时候，父页面的text里面就把显示出来，通过 getSelection和selection.createRange方法来实现，关于selection.createRange是只能在ie6上面能用，所以要加。

具体代码如下：

 
<html>
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 
<title>无标题文档</title>
 
</head>
 
<body>
 
<input type="text" id="text1">
 
<iframe src="http://www.qianyunlai.com/blog/download/demo1.html" id="iframe1" name="iframe1" style="width:60%; height:60%;">
 
</iframe>
 
</body>
 
</html>
 
<script language="JavaScript">
 
var childHtml = document.getElementById("iframe1").contentWindow;
 
var parentText = document.getElementById("text1");
 
if (childHtml.document.selection) {
 
    childHtml.document.onmouseup = function() {
 
        parentText.value = childHtml.document.selection.createRange().text;
 
    }
 
} else {
 
    childHtml.onmouseup = function() {
 
        parentText.value = childHtml.window.getSelection();
 
    }
 
}
 
</script>

附加说明：

子页面访问父页面：通过关键字 parent 获取父页面对象

parent.document.getElementById(‘***’)……

转载于：http://www.qianyunlai.com/blog/326.html

yanhui_wei

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【javascript】javascript中父页面与子页面互传值

之前还真没做过类似的东西，，top页面获取子页面的document。。在百度搜了下即找到这个东东，还好，能用。主要就是使用 contentWindow方法，获取子页面的所有document，再做处理。通过js从父页面获取子页面的值通常在很多情况下都会遇到通过js来传值的问题，只要通过一些页面关联，他们的值就可以互相传递，其中应用框架的时候传值问题可能会遇到更多一些
复制链接

扫一扫