Javscript calling page function iframe framework approach

This article describes how to Javscript call iframe page frame function can be achieved by value or modify the value between iframe, is a very useful skill, need friends can refer to the following

This paper describes examples of method invocation framework iframe page function in Javscript, calling this method is actually very simple, with this method we can pass values or modify values between iframe can be achieved, are very simple to operate. Share to you for your reference. Specific method is as follows:

Access functions inside the iframe:

Copy the code code is as follows:

document.getElementById('commentIframe').contentWindow.hasLogined();

commentIframe is the id iframe.
To perform inside the window.onload

Examples are as follows:

1.html

Copy the code code is as follows:

  <a href="#" onclick="window.frames['frame1'].MyNext()">aa</a> 
 
<iframe id="frame1" src="2.html" ></iframe> 

2.html page

Copy the code code is as follows:

  <script language="javascript" type="text/javascript"> 
 
 function MyNext() 
 
 { 
 
   alert(1); 
 
 } 
 
</script>

Click the test button 1.htm, you can make 2.htm (iframe page) button in mybutton failure. It's that simple, huh, huh. If you are calling 2.htm function in JS wrote:

Copy the code code is as follows:

self.frames['a'].funtionname(param)

Call 1.htm in 2.htm in JS function: iframe2.showInfo ();

Examples:

Suppose there are two pages, index.html and inner.html. Index.html which there is a iframe, the iframe's src point inner.html.

We now have to do is:

1. call a method on the inner.html js in the index.html
2. js call a method on the index.html in inner.html

Codes are as follows:

index.html：

Copy the code code is as follows:

  <html> 
 
<head> 
 
<script type="text/javascript"> 
 
function ff(){ 
 
alert(">>this is index's js function  index.html"); 
 
} 
 
</script> 
 
</head> 
 
<body> 
 
<div style="background: lightblue;"> 
 
This is index page. 
 
<input type="button" value="run index's function" onclick="ff();" /> 
 
<input type="button" value="run inner page's function" onclick='window.frames["childPage"].sonff();' /> 
 
</div> 
 
<iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0"></iframe> 
 
</body> 
 
</html>

inner.html：

Copy the code code is as follows:

  <html> 
 
<head> 
 
<script type="text/javascript"> 
 
function sonff(){ 
 
alert(">>this is inner page's js function"); 
 
} 
 
</script> 
 
</head> 
 
<body> 
 
<div style="background: lightgreen;"> 
 
This is inner page. 
 
<input type="button" value="run index's function" onclick='parent.window.ff();' /> 
 
<input type="button" value="run inner page's function" onclick="sonff();" /> 
 
</div> 
 
</body> 
 
</html>

In this paper, we want the design to help javascript-based web application.

Javscript calling page function iframe framework approach

You may also be interested in the article:

Guess you like