JavaScript获取子窗口、父窗口的内容（可用于页面之间传递内容）

最新推荐文章于 2022-11-08 20:27:11 发布

microcosmv

最新推荐文章于 2022-11-08 20:27:11 发布

阅读量7.7k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 获取其他页面内容父窗口子窗口

本文链接：https://blog.csdn.net/microcosmv/article/details/51907701

版权

JavaScript 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

1、Window对象的opener属性：返回对创建此窗口的窗口的引用

注释：只有表示顶层窗口的 Window 对象的 operner 属性才有效，表示框架的 Window 对象的 operner 属性无效。

例1：通过按钮或者超链接的形式实现从子窗口中传递内容到父窗口中。
父窗口：

<!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>
  <title> test </title>
  <meta charset="utf-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<script type="text/javascript">
<!--
    function init(){
        window.open("sub.html");
    }
//-->
</script>
 <body >
    <input type="text" id="text" />
    <input type="button" value="进入子页面" onclick="init()" />
    <br>
    <a href = "sub.html" target = "_blank">打开sub页面</a>
 </body>
</html>

子窗口：

<!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>
  <title> sub </title>
  <meta charset="utf-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<script type="text/javascript">
<!--
    function init(){
        var text = document.getElementById("text").value;
        var win = window.opener;
        var text_fu = win.document.getElementById("text");
        text_fu.value = text;
    }
//-->
</script>
 <body >
    <input type="text" id="text" />
    <input type="button" value="传递给父窗口" onclick="init()" />

 </body>
</html>

2、Window对象的parent属性：返回父窗口。
用于：
1，框架中。
2，内嵌框架中。

3、Window对象的集合：frames[]：返回窗口中所有命名的框架。

该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架或 <iframe>。
属性 frames.length 存放数组 frames[] 中含有的元素个数。
注意，frames[] 数组中引用的框架可能还包括框架，它们自己也具有 frames[] 数组。

例2：通过内嵌框架实现父窗口和子窗口互取内容。
页面：

<!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>
  <title> test </title>
  <meta charset="utf-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<script type="text/javascript">
<!--
    function init(){
        var text = document.getElementById("text").value;
        var win = window.frames[0];
        var text_fu = win.document.getElementById("text");
        text_fu.value = text;
    }
//-->
</script>
 <body >
    <input type="text" id="text" />
    <input type="button" value="传给子窗口" onclick="init()" />
    <br>
    <iframe src = "sub1.html" ></iframe>
 </body>
</html>

sub1代码：

<!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>
  <title> sub1 </title>
  <meta charset="utf-8" />
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
 </head>
<script type="text/javascript">
<!--
    function init(){
        var text = document.getElementById("text").value;
        var win_fu = window.parent;
        var text_fu = win_fu.document.getElementById("text");
        text_fu.value = text;
    }
//-->
</script>
 <body >
    <input type="text" id="text" />
    <input type="button" value="传给父窗口" onclick="init()" />

 </body>
</html>

以上内容作为个人学校记录，IE11测试，仅供参考。

microcosmv

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript获取子窗口、父窗口的内容（可用于页面之间传递内容）

1、Window对象的opener属性：返回对创建此窗口的窗口的引用注释：只有表示顶层窗口的 Window 对象的 operner 属性才有效，表示框架的 Window 对象的 operner 属性无效。例1：通过按钮或者超链接的形式实现从子窗口中传递内容到父窗口中。父窗口：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
复制链接

扫一扫