Question

我在文档 movie.htm ：

中有两个iframe

<iframe id='movies' class='top' frameborder='0'></iframe>

和

<iframe src="moviesearch.htm" class="bottom" frameborder="0">

在 moviesearch.htm 中有一个输入标记

<input id="search_str" type="text">

我想知道如何使用文档 movie.htm 中的JavaScript访问此值（包含在 moviesearch.htm 中）。

当用户连续输入字段时，需要在 movie.htm 中实时更新该值。

我如何在JavaScript中实现这一目标？

Answer 1

如果两个网页都在同一个网域中，您就可以iframe.contentDocument。 https://developer.mozilla.org/en/XUL/iframe#p-contentDocument

Answer 2

postMessage的。 https://developer.mozilla.org/en/DOM/window.postMessage

movie.htm：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
Current value:<div id="updatedvalue"></div>
<iframe src="moviesearch.htm"></iframe>

</body>
<script>
window.addEventListener
    ("message", function(e) {
    document.getElementById("updatedvalue").innerHTML = e.data;
    }, true);


</script>
</html>

moviesearch.htm：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" onkeyup="sendMessage(this.value)">
</body>
<script>
function sendMessage(message) {
    window.parent.postMessage(message, "*");
}
</script>
</html>

从iframe获取价值到iframe

2 个答案: