Question

您好，感谢您阅读我的帖子。

这是我基本上想做的事情：

在第一个HTML页面（“parent.html”）中，有一个按钮;
当用户点击该按钮时会弹出一个新窗口（“child.html”）
并更新子窗口中“div”元素的内容。

“Firefox”和“Chrome”下的最终操作失败。

parent.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Parent window document</title>
  </head>
  <body>
    <input 
     type="button" 
     value="Open child window document" 
     onclick="openChildWindow()" />

    <script type="text/javascript">
    function openChildWindow()
    {
      var s_url     = "http://localhost:8080/projectroot/child.html";
      var s_name    = "ChildWindowDocument";
      var s_specs   = "resizable=yes,scrollbars=yes,toolbar=0,status=0";
      var childWnd  = window.open(s_url, s_name, s_specs);
      var div       = childWnd.document.getElementById("child_wnd_doc_div_id");
      div.innerHTML = "Hello from parent wnd";
    }
    </script>
  </body>
</html>

child.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Parent window document</title>
  </head>
  <body>
    <div id="child_wnd_doc_div_id">child window</div>
  </body>
</html>

IE9 =＆gt;它有效。
Firefox 13.0.1 =＆gt;它不起作用。错误消息：“div为null”。
Chrome 20.0.1132.47 m =＆gt;不起作用。

你明白这种行为吗？

你可以帮助我让它在这三种情况下发挥作用吗？

谢谢你，并致以最诚挚的问候。

Answer 1

我认为当您尝试从中访问元素时，窗口/文档未加载。你可以做点什么

childWnd.onload = function() {
    var div       = childWnd.document.getElementById("child_wnd_doc_div_id");
    div.innerHTML = "Hello from parent wnd";
}

另外，您可以查看mdn doc。

解决问题的更好方法可能是对“孩子”进行更改。您可以使用window.opener访问父窗口。但是你应该记住父窗口可以关闭，所以你应该考虑某种类型的本地存储（例如cookie）。

从父窗口到子窗口的Javascript getElementById

1 个答案: