子窗口调用符窗口的dom节点

在框架中，我用 JavaScript 获取 JSON 数据，组织成 HTML 代码，最后将其填充至上层文档的一个元素中。按照一般的写法，我们需要用到类似如下的语句：

window.parent.document.getElementById("myEle").innerHTML = html;

使用 jQuery ，写法如下

$("#myEle", window.parent.document).html(html);

即指明了是在 window.parent.document 中查找 id=myEle 的元素。

随着前面的问题的解决（其实是对 jQuery 的了解不够），现在两种方案都可以实现我需要的效果了。

另外还有一种实现方式，代码如下：

1.parent.$("#myEle").html(html);

这种方法要求父文档也要调用 jQuery 。

js中BOM对象的区别和用法：

首先来说说 parent.window与top.window的用法

window.location.href、location.href是本页面跳转

parent.location.href是上一层页面跳转

top.location.href是最外层的页面跳转

举例说明：

如果A,B,C,D都是php、D是C的iframe、C是B的iframe，B是A的iframe。

如果D中js这样写：

window.location.href、location.href：D页面跳转
parent.location.href：C页面跳转
top.location.href：A页面跳转

现在就可以明白a连接的target的用法了：

  • _blank：重新打开一个窗口
  • _parent：父窗口执行重定向
  • _self：自身页面重定向
  • _top:第一个父窗口重定向

综上所述可知：

parent.window:父窗口对象

top.window:第一个父窗口的对象

window.parent与window.openner区别

window.parent 是iframe页面调用父页面对象，当我们想从iframe内嵌的页面中访问外层页面是可以直接利用window.parent获取；

例子如下：

a.html

<html>
<head>
    <title>父页面</title>
    <meta charset='utf-8' />
</head>
<body>
<form id="form1" action="">
    <div>
        输入值：
        <input type="text" name="username" id="username" /><br />
        <iframe src="b.html" width="400px" height="300px"></iframe>
    </div>
</form>
</body>
</html>

b.html

<html>
<head>
    <meta charset='utf-8' />
    <script type="text/javascript">
        function getpValue()
        {
            document.getElementById("span1").innerText=window.parent.document.getElementById("username").value;
        }
    </script>
</head>
<body>
<span>文本框值为：</span><span id="span1"></span><br />
<input type="button" value="获取父窗口内的文本框值" onclick="getpValue();">
</body>
</html>

注意:测试的时候要放在服务器环境里面，否则出现Blocked a frame with origin "null" from accessing a cross-origin frame。
跨页面操作涉及域的概念（origin）。
错误的意思是：

未捕获的安全错误：阻止了一个域为null的frame页面访问另一个域为null的页面。
也许你是在本地直接用浏览器打开的、地址栏是file:///的页面吧


图片例子1

window.opener是window.open或超链接打开的子页面调用父页面对象

例子1如下

a.html

<html>
<head>
    <meta charset="utf-8"/>
    <title>父页面</title>
    <script type="text/javascript">
        function openB() {
            window.open('b.html', 'b', 'width=400,height=200,status=no,toolbar=no,menubar=no,location=no,resizable=yes,left=200,top=100');
        }
    </script>
</head>
<body>
<form id="form1" action="">
    <div>
        输入值： <input type="text" name="username" id="username"/><br/>
        <input type="button" value="打开窗口B" onclick="openB();"/><br/>
        <a href="b.html" target="_blank">超链接打开B页面</a>
    </div>
</form>
</body>
</html>

b.html

<html>
<head>
    <meta charset="utf-8"/>
    <script type="text/javascript">
        function getpValue() {
            document.getElementById("span1").innerText = window.opener.document.getElementById("username").value;
        }
    </script>
</head>
<body>
    <span>文本框值为：</span><span id="span1"></span><br/> 
    <input type="button" value="获取父窗口内的文本框值" onclick="getpValue();">
</body>
</html>

例子2如下：

window.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    mywin=window.open('http://localhost:81/test.html');
    // setTimeout(function(){
    //     mywin.close();
    // },6000);
</script>

</body>
</html>

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>啦啦啦啦啦</h1>
<script>
    setTimeout(function(){
        console.log(window.opener.location.href ="https://www.baidu.com" );
    },3000);

</script>
</body>
</html>

注意:两种访问方式的差别。

父窗口修改子窗口iframe注意事项：

<!DOCTYPE html>
<html>
<head>
</head>
<iframe id='f1' src="./client.html"  height="400" width="400"></iframe>
<script>
    var f2 = document.getElementById('f1').contentWindow.document.getElementById("title");
    //加载失败、页面并没有加载完毕执行
    console.log(f2);
    window.onload = function() {
        var f1 = document.getElementById('f1').contentWindow.document.getElementById("title");
        console.log(f1);
        //正确
    }
</script>
</html>

子窗口的内容

这里说一下为什么、用原生的onload事件、而不用jquery或者其他?

onload，指示页面包含图片等文件在内的所有元素都加载完成。

而JQuery的:$(function(){ //do someting })其实这个就是jq ready()的简写、

他等价与$(document).ready(function(){ //do someting})。

这个是表示文档结构已经加载完成（不包含图片等非文字媒体文件）。
两者区别不一样

下面来举几个常用的例子

parent.window与top.window一般在分割的页面即 frameset或iframe中使用

注销整个框架后返回到login.php：parent.window.location='Login.php'
或者top.window.location='Login.php'

window.parent也是常在框架中使用。

  • 刷新1：window.parent.location.reload();
  • 刷新2：window.parent.MainForm.location.reload();
  • 刷新3：top.playFrame.location.reload();
  • 获得其他框架的元素值:window.parent.MainForm.form1.text1.value;

window.opener主要是获得通过超链接或者 window.open() 打开本身页面的页面的一些，比如获得值，刷新等。

  • 获值：window.opener.document.getElement(“txtName”).value;
  • 后退：top.playFrame.history.go(-1);
  • 前进： top.playFrame.history.go(1);

就总结到这里，这些对象很实用

Last modification：January 6, 2020
© Allow specification reprint
如果觉得我的文章对你有用，请随意赞赏