Html页面与页面间的交互

最新推荐文章于 2024-06-28 10:00:28 发布

Rkatsiteli

最新推荐文章于 2024-06-28 10:00:28 发布

阅读量6.5k

点赞数 1

分类专栏： FRONT-END + WEB 文章标签： html

FRONT-END + WEB 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

分别为：`window.parent` 与 `window.opener`两者

简单介绍：

1、`window.opener` 是 `window.open` 打开的子页面调用父页面对象

window.opener 只是对弹出窗口的母窗口的一个引用。

比如：a.html中，通过点击按钮等方式window.open出一个新的窗口b.html。那么在b.html中，就可以通过window.opener（省略写为opener）来引用a.html，包括a.html的document等对象，操作a.html的内容。

附上window.opener效果图：

window.opener实现的效果图

a.html的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>父页面</title>
    </head>
    <body>
        <input type="button" name="button" id="button" value="提交" onclick="open()" />
        <input type="text" name="textfield" id="textfield" />
    </body>
    <script>
        function open() {
            window.open("b.html");
        }
    </script>

</html>

b.html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>子页面</title>
    </head>
    <body>
        <button onclick="aaa()">更改父页面的文件</button>
    </body>
    <script>
        function aaa() {
            /**
             * //更改父页面的元素
             * window.opener 返回的是创建当前窗口的那个父窗口的引用，比如点击了a.htm上的一个链接而打开了b.htm
             */
            window.opener.document.getElementById('textfield').value = '123123123';
        }
    </script>

</html>

2、window.parent 是iframe页面调用父页面对象

parent表示父窗口，比如一个A页面利用iframe或frame调用B页面，那么A页面所在窗口就是B页面的parent。

a.html的代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>parent测试</title>
    </head>

    <body>
        <form name="form1" id="form1">
            <input type="text" name="username" id="username"/>
        </form>
        <iframe src="b.html" width=100%></iframe>
    </body>

</html>

b.html代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        b页面
    </body>
    <script>
        //如果我们需要在b.html中要对a.html中的username文本框赋值（就如很多上传功能，上传功能页在ifrmae中，上传成功后把上传后的路径放入父页面的文本框中）
        window.parent.form1.username.value = "z这里是b页面赋值操作";
    </script>

</html>