Jquery Inter-Frame Communication
Question
I have main_page.htm as
<frameset rows="30,*" frameborder=0 border=0>
<frame name="top_frame" src="top.htm">
<frame name="bottom_frame" src="bottom.htm">
</frameset>
The code in bottom.htm is :
<div id="BottomFrameTest">Hi There!</div>
Now How can I change the text in the above from top.htm which is in top_frame
The code in top.htm is :
<script>
function ChnageDivText()
{
$("#BottomFrameTest").html("Hello World. This text is changed");
}
</script>
<body>
<input type="button" value="Change Text" onclick="ChnageDivText()" />
</body>
Above code obviously doesn't work. How can I communicate with bottom_frame from top_frame ?
2 answers
solution1
0 2012-05-11 07:48:51
Supposing all your frames come from the same domain you can use
parent.bottom_frame.getElementById("BottomFrameTest").innerHTML = "Hello World. This text is changed";
And of course, if you really want to use jquery, you can do
$(parent.bottom_frame).find("#BottomFrameTest").html("Hello World. This text is changed");
solution2
0 2012-05-11 07:50:12
you can try something like this actually you are trying to update an element for other frame so you are trying crossframe jquery operations
$(document).ready(function(){
function ChnageDivText()
{
$(parent.BottomFrameTest.document).contents().find(‘#TextBox1′).val(‘Hello World. This text is changed’);
}
});
i've used textbox for example you can set the id of your desired element in your find method. you can find it in more depth here .
if $.contents() is new for you, you can find it documented here .
Here is a somewhat similar example from jquery docs.
Hope that all will help you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.