We have begun nesting content within iframes and interfacing with said content from the "parent" pages by way of jQuery and JavaScript. I've dug into how it all works and found that it isn't too hard to talk between the page in an iframe and the page holding the iframe. For example, let's says you had a page named inner.html which was crafted like so:
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<script src="jquery-1.5.js" type="text/javascript">
</script>
</head>
<body>
<p>This is a page within an iFrame:</p>
<input id="innerinput">
<input id="innerbutton" type="submit" value="go">
<div id="inneroutput">
</div>
</body>
</html>
And, let's say you also had a page called outer.html which had an iframe which had inner.html inside of it. Let's say outer.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<script src="jquery-1.5.js" type="text/javascript">
</script>
</head>
<body>
<p>This is a page holding an iFrame:</p>
<input id="outerinput">
<input id="outerbutton" type="submit" value="go">
<div id="outeroutput">
</div>
<iframe name="eye" src="inner.html" />
</body>
</html>
Alrighty, finally let's say you wish to have messages appear in both pages when one clicks either button in either page. Let's say, moreover, that the messages should be the same copy that is in the input field next to the button that is clicked. How may we make this happen? Well, it turns out that we do not need to alter inner.html whatsoever. I am able to make the needed happen by refactoring output.html to be as such:
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<script src="jquery-1.5.js" type="text/javascript">
</script>
</head>
<body>
<p>This is a page holding an iFrame:</p>
<input id="outerinput">
<input id="outerbutton" type="submit" value="go">
<div id="outeroutput">
</div>
<script type="text/javascript">
function initframe(obj) {
var frameBody = $(obj.document.getElementsByTagName("body")[0]);
frameBody.find("#innerbutton").click(function (evt) {
var inbox = frameBody.find("#innerinput").val();
document.getElementById('outeroutput').innerHTML = inbox;
obj.document.getElementById('inneroutput').innerHTML = inbox;
});
$("#outerbutton").click(function (evt) {
var outbox = $("#outerinput").val();
document.getElementById('outeroutput').innerHTML = outbox;
obj.document.getElementById('inneroutput').innerHTML = outbox;
});
}
</script>
<iframe name="eye" src="inner.html" onload="initframe(window.eye)" />
</body>
</html>
The trick here is to call a function at the onload event of the iframe that does all of the work. Passing the contents of the iframe to the function, as shown above, allows one to reach into the iframe's page and mess with it. Yay!
No comments:
Post a Comment