How to change iframe src from another page
Question
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 using javascript or jquery from tree.php.I have alredy tried these
document.getElementById['contentframe'].src = "contentpage.php";
$("#contentframe").attr("src", "contentpage.php");
1 answers
solution1
2 2011-08-29 09:46:04
Assuming all the frames are in the same domain, this can be done easily.
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var change_iframe_src = function(new_src) {
$("#myframe-content").attr('src', new_src);
}
</script>
</head>
<body>
<!-- frame which includes your tree.php -->
<iframe src="iframe.html" width="200" height="200" border="1"></iframe>
<!-- frame for which we will change src attribute -->
<iframe id="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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="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>
<div id="nav">
<a href="#" rel="iframe2.html">Change iframe src to iframe2.html</a>
<a href="#" 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.
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.