How To Change Iframe Src From Another Page
I have a php page that includes another php page named 'tree.php' and also contain an iframe .The Iframe calls the page 'contentpage.php'.Then i want to change the src of iframe us
Solution 1:
Assuming all the frames are in the same domain, this can be done easily.
<html><head><title>Test</title><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><scripttype="text/javascript">var change_iframe_src = function(new_src) {
$("#myframe-content").attr('src', new_src);
}
</script></head><body><!-- frame which includes your tree.php --><iframesrc="iframe.html"width="200"height="200"border="1"></iframe><!-- frame for which we will change src attribute --><iframeid="myframe-content"src=""width="400"height="200"border="1"></iframe></body>Now in tree.php attach a click handler for something that should change the src of the iframe attribute (possibly some link). Example:
<html><head><title>Tree</title><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><scripttype="text/javascript">
$(function() {
$("#nav a").click(function(e) {
e.preventDefault();
// call function in a parent frame
parent.window.change_iframe_src(this.rel);
})
})
</script></head><body><divid="nav"><ahref="#"rel="iframe2.html">Change iframe src to iframe2.html</a><ahref="#"rel="iframe3.html">Change iframe src to iframe3.html</a></div></body>Now with this kind of setup the links in the tree.php would call the function defined in parent window (the window which embeded the tree.php itself). That function (change_iframe_src in this example) takes one argument which is a new url to which src attribute of the frame myframe-content should be changed to.
Again, this works as long as the base document and the iframe with tree.php are documents in the same domain.
Post a Comment for "How To Change Iframe Src From Another Page"