使用 Javascript 打开一个弹出窗口并从父窗口附加元素答案

【问题标题】：Open a popup window with Javascript and attach elements from parent window使用 Javascript 打开一个弹出窗口并从父窗口附加元素
【发布时间】：2014-04-23 14:46:55
【问题描述】：

我有一个用 ASP.NET 生成的 HTML 页面，parent.aspx，我想在单击超链接时打开一个包含现有 html 页面的弹出窗口，article.html 并将 parent.aspx 中的元素附加到 html 页面。 parent.aspx 和 article.html 这两个文件位于同一个文件夹中。

article.html，除了包含header和body等标准元素外，body内部只有一个div，既没有内容也没有节点，用作追加内容的占位符

parent.aspx

<a href="javascript:displayPopup('article.html');">Open Article</a>
<div id="articleContent">
    <table>
    <!--article content-->
    </table>
</div>

article.html

<body>
<div id="article"></div>
</body>

Javascript

function displayPopup(url) {
            var popupWindow;
            var width = 960;
            var height = 700;
            var left = parseInt((screen.availWidth / 2) - (width / 2));
            var top = parseInt((screen.availHeight / 2) - (height / 2));
            var articleContent = document.getElementById("articleContent").innerHTML;
            var windowProperties = "width=" + width + ",height=" + height + ",status,resizable,left=" + left +           ",top=" + top + ",screenX=" + left + ",screenY=" + top + ",scrollbars=yes";
            popupWindow = window.open(url, 'article', windowProperties);
            var articleDiv = popupWindow.document.getElementById("article");
            articleDiv.innerHTML += articleContent;
            popupWindow.document.close();
            if (window.focus) 
            { popupWindow.focus() }
        }

我将代码放在jsFiddle 中，虽然我不能插入两个不同的 HTML 页面，但只有 parent.aspx 的标记。该代码在调试模式下工作，但由于某种原因它在正常执行期间不起作用。我无法发现错误，有人可以帮忙吗？谢谢！

更新：如果我检查正文中弹出窗口的代码

<body>
<div id="article" class="content"> </div>
<script type="text/javascript" src="https://www.pc-gizmos-ssl.com:9899/scripts/main.js?ver=1.0.0.6">
<form id="GM_form" target="_blank"></form>
</body>

我不知道 pc-gizmos 脚本是从哪里来的

【问题讨论】：

标签： javascript html asp.net popup append

【解决方案1】：

在 parent.aspx 页面上，将代码更改为如下所示：

<div id="articleContent">
    <b>
      This is some article content
    </b>
</div>

完成此操作后，再次尝试单击弹出窗口，然后您应该会看到“这是一些文章内容”以粗体显示。

此外，您从未说明单击“弹出”链接后是否显示错误或只是空白页面。这使得提供解决方案变得困难。

【讨论】：

不要附加到文章 div 中，而是尝试替换 div 中的所有内容。换句话说，不要使用articleDiv.innerHTML += articleContent; 试试articleDiv.innerHTML = articleContent; 脚本现在是否包含pc-gizmos？
我使用 Bugzilla 进行了分析，它告诉我 'articleDiv' 为 NULL