CODEWITHSUNDEEP
javascript
methuselah
methuselah

Reputation: 13206

Getting value from iframe to iframe

I have two iframes in the document movie.htm:

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

and

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

Within moviesearch.htm there is an input tag

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

I was wondering how I access this value (contained in moviesearch.htm) using JavaScript in the document movie.htm.

As the user is typing the field continuously it would require that the value be updated real-time within movie.htm.

How would I achieve this in JavaScript?

Upvotes: 0

Views: 177

Answers (2)

Jeffrey Sweeney
Jeffrey Sweeney

Reputation: 6116

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>

Upvotes: 0

Bergi
Bergi

Reputation: 664206

If both pages are in the same domain, you'll be able to iframe.contentDocument. https://developer.mozilla.org/en/XUL/iframe#p-contentDocument

Upvotes: 1

Related Questions