使用Javascript将值传递给子窗口

时间:2018-03-13 12:00:14

标签: javascript new-window

我正在尝试从父页面获取question id并将其传递到我的新子页面。当子窗口获得响应时,它会将此数据放入text_body id。我设法创建question id并打开一个新窗口。但是,将值传递给text-body id时会出错。

  

无法将属性'value'设置为null。

我认为问题的发生是因为JavaScript仍然检测到上一页,并且无法关注新窗口。我在下面提供了我的源代码。

function wait(ms){
    var start = new Date().getTime();
    var end = start;
    while(end < start + ms) {
        end = new Date().getTime();
    }
}

var body = document.getElementById('question').innerText;
alert(body);

var k = window.open("http://testing/support");
wait (2000);
k.focus();
wait (1000);
k.focus();
k.document.getElementById('text_body').value = body;

1 个答案:

答案 0 :(得分:1)

由于跨域限制,浏览器已经限制了打开弹出窗口和iframe的安全性。

您获得Cannot set property 'value' of null的原因是您尝试运行代码直接从javascript打开一个窗口 - ,无需任何用户操作

这会阻止代码正常运行,因此'value'({1}}(null子窗口)上的k(属性或变量)是您的错误;当您尝试设置变量k时,'value'为空。

浏览器会请求以不同方式允许弹出窗口的权限。如果用户没有点击某些内容来请求弹出窗口,则尚未授予许可权限。

下面的示例代码演示了您将在初始调用时收到错误,以打开window并设置子项的变量而无需用户操作,但是当用户点击某些内容时(div in这个案例),它将在确认许可后打开。

打开控制台窗口,刷新页面,您将看到非交互式呼叫的错误。

演示的工作部分使用初始值显示在child window中,然后在1.5秒后,parent将调用child中将更新显示的函数最后,parent将访问child variable并直接设置显示。

定时器只是为了清楚地看到发生的变化。

希望这涵盖了你想要做的事情......

<强> parentPage.html:

<html>

<head>
    <title>Parent Page</title>
</head>

<body>
    <div id="divQuestion" onclick="openChild()">Parent text</div>

    <script>
        function openChild() {
            var parentText = document.getElementById("divQuestion").innerText;
            var win = window.open("childPage.html");

            // Call a function in the child window...    
            setTimeout(function () { win.changeValue(parentText) }, 1500);

            // Directly use a variable in the child window...
            setTimeout(function () { win.childText.innerText = body + " and some more..." }, 3000);
        }

        // By calling directly you are attempting to open a child window 
        // without user permission - this will fail.
        // openChild();
    </script>
</body>

</html>

<强> childPage.html:

<html>

<head>
    <title>Child Page</title>
</head>

<body>
    <div id="divText">Child text</div>

    <script>
        var childText = document.getElementById("divText");

        function changeValue(val) {
            // Take a value from elsewhere (parent window in this case) and update the div
            childText.innerText = val;
        }
    </script>
</body>

</html>