如何使用Javascript从iframe编辑索引页的innerHTML

How do I edit the innerHTML of an index page from an iframe using Javascript?

本文关键字：索引 innerHTML 编辑 iframe 何使用 Javascript      更新时间：2023-09-26

在我的索引页面上，在几个不同的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'）。任何建议都将不胜感激。

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

你应该能够像这样访问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。

然后我突然想到，在iframe存在于DOM中之前，您正在调用函数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的情况下，我无法确定您的错误。

相关文章：