Question

我有2个HTML文件，即a.html和b.html，一个js文件即do.js。

以下是每个文件的每个内容：

a.html：

<head>
    <script src="do.js" type="text/javascript"></script>
</head>
<body>
    <button onClick = "doWork();">click me</button>
    <iframe src = "b.html" id = "previewFrame"></iframe>
</body>

b.html（相关部分）：

<div id = "container"></div>

do.js：

function doWork(){
 var div = $('#previewFrame').contents().find('#container');
 div.html("<input type = 'text' id = 'testElem' value = '12'><script>alert(document.getElementById('testElem').value);</script>");
}

当我运行上面的代码时，iframe的内容会被文本框替换，但警报会失败。

我收到一个“类型错误”，指出document.getElementById ...为空。

有人可以告诉我上面代码中缺少什么吗？

Answer 1

您正在使用document调用Javascript函数，但此对象来自父文档，而不是iframe的文档，请尝试使用：

function doWork(){
 var a = $('#previewFrame').contents().find('body');
 a.html("<input type = 'text' id = 'testElem' value = '12'><sc"+"ript>alert($('#previewFrame').contents()[0].getElementById('testElem').value);</scr"+"ipt>");
}

请参阅演示here。

iframe的div中的元素在当前代码中不可访问

1 个答案: