Javscript calls methods of functions in iframe pages

2020-03-30 04:15:36
OfStack

This example describes the method of calling the function in the iframe frame page in Javscript, this method is actually very simple, with this method we can achieve the value between the iframe or modify the value, the operation is very simple. Share with you for your reference. The specific implementation method is as follows:

Access the function inside the iframe:

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

CommentIframe is the id of the iframe.
It's going to be executed inside window.onload

Here are some examples:

1. The HTML

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

<iframe id="frame1" src="2.html" ></iframe>

2. The HTML page

<script language="javascript" type="text/javascript">

 function MyNext()

 {

   alert(1);

 }

</script>

Clicking the test button in 1.htm deactivates the mybutton button in 2.htm(iframe page). It's that simple, hehe. If you want to call the JS function in 2.htm, write like this:

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

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

Examples:

Suppose you have two pages, index.html and inner-.html. There is an iframe in index.html, and the SRC of this iframe points to inner-.html.

Here's what we're going to do:

1. Call a js method on inner. HTML in index.html
2. Call a js method on index.html from inner. HTML

The implementation code is as follows:

Index.html:

<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:

<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>