如何使用 Javascript 从 iframe 编辑索引页面的 innerHTML？答案

【问题标题】：How do I edit the innerHTML of an index page from an iframe using Javascript?如何使用 Javascript 从 iframe 编辑索引页面的 innerHTML？
【发布时间】：2013-11-18 18:56:11
【问题描述】：

在我的索引页面上，几个不同的 div 中有一个 id = 'myframe' 的 iframe，该 iframe 有一个 src = order.html 并且该页面有一堆不同的单选按钮和复选框，它们的值与它们相关联。

我目前在编写 javascript 函数以编辑本网站索引页面上的 div（id = 'purchase'）以显示当前订单/购买时遇到了困难。

function addAlbum(boxElement){


            var iframe = document.getElementById('myframe');

            var s = iframe.contentWindow.document.getElementById('purchase').innerHTML;

            i = boxElement.value.indexOf("|");
            clean_string = boxElement.value.substring(0,i);
            //price = parseInt(boxElement.value.substring(i +1, boxElement.value.length));
            replaceString = "";

            if(boxElement.checked){

                s += '<div class="one_record">';
                s += clean_string;
                s += '</div>';
            }
            else{
                replaceString = '<div class="one_record">';
                replaceString += clean_string;
                replaceString += '</div>';

                s.replace(replaceString, "");

            }

        }

当我运行我的函数时，我收到一条错误消息：“无法读取 null 的属性 'contentWindow'”，这意味着它无法找到我的 iframe (id = 'myframe')。非常感谢任何建议。

【问题讨论】：

我认为问题可能是 iFrame 已经是一个“窗口”对象，因此您可以考虑将 contentWindow 更改为 contentDocument 并查看是否可以解决您的问题。您可以尝试使用以下内容访问 iFrame 的文档对象： var iframe = window.frames["myframe"]; var s = iframe.document.getElementById('purchase').innerHTML;
我之前修改了我的答案，我想我实际上发现了你遇到的错误。

标签： javascript html iframe innerhtml getelementbyid

【解决方案1】：

~~过去我发现当你通过document.getElementById()的ID捕获它时无法编辑iframe的内容，你需要通过window.frames即window.frames.iFrameName.document.body.innerHTML。 s>~~

您应该能够像这样访问 IFrame 的文档（与您差不多）：

var frame = document.getElementById('frame');
frame.onload = function() {
    var frameDoc = frame.contentDocument ? frame.contentDocument : frame.contentWindow.document;
    frameDoc.body.innerHTML += '<br />Appended from the parent Page';
}

在纠正了我自己对这个问题的无知之后，我仔细研究了您的代码所发生的一切，并没有真正突出。事实上，起初我在复制问题时遇到了问题，因为您的代码实际上对我有用。通常这意味着 iFrame 尚未加载。

所以我尝试了，我得到的唯一错误是 iFrame 元素 getElementById('purchase') 的 innerHTML 为 NULL，而不是 contentWindow。

然后它击中了我，你在 DOM 中存在 iframe 之前调用了函数 addAlbum(boxElement)。有了这个 HTML，我在 IE 中得到了完全相同的错误：

<html>
<head></head>
<body>
    <script type="text/javascript">

    var frame = document.getElementById('frame');
    (function() {
        var s = frame.contentWindow.document.getElementById('s1').innerHTML;
            s += '<br />Appended from the parent Page';
    })();

    </script>
    <iframe id="frame" src="internal.htm"></iframe>
</body>
</html>

请注意脚本和 iframe 是如何在正文中的，而 iframe 在脚本下方。我敢打赌你有类似的情况，因为没有其他任何东西会导致如此明显的错误。不幸的是，如果没有看到您的 HTML，我无法查明您的错误。

【讨论】：