Calling JS functions in iframe pages with JS

Time:2021-12-2

Recently, I made a paper opening report every day. I was itching to design the web again. I suddenly encountered a problem. In the past, I used to run in ie when designing web pages. I never considered Firefox, let alone chrome, but now it is different. At least I think web pages incompatible with Firefox are extremely ugly and fake, so I started with this concept, I began to pay attention to this compatibility when designing the page, and this time I encountered a compatibility problem. There is a floating frame in HTML, < iframe >, which can be embedded into the page to make a frame page, which is very suitable, as shown in the following figure,
 
An HTML page is divided into left and right parts. The navigation bar is on the left and the content to be displayed is on the right. The code is as follows:
The code in the left column is:
<IFRAME frameBorder=0 id=frmTitleLeft name=framLeft src=”left.html” style=”HEIGHT: 100%; width:180px;”>
Connect to left.html
The right column is similar. The preview effect of my page is as follows:
 
Now what kind of effect can be achieved to achieve a more practical effect? Click any link and it can be displayed in the right column. Obviously, it needs to be realized through JS. I won’t say more about the original incompatible methods. Please remember the following implementation steps:
1. First obtain the iframe object in the right column
var frames=document.getElementById(“frameid”);// Frameid is the ID name of iframe in the right column
2. Reset its SRC value
frames.src=pageurl;// Pageurl is the destination page to display
This realizes the jump of the page

But one more thing, if you want to call one of the functions, it’s not so simple
For example, there is a function right () in the right-hand column. I want to call the right () function in the link of the left column. How do I do this?

1. First, the leftframe is embedded in the container page index.html, so you need to return to the index level and obtain the rightframe object
var frames=window.parent.window.document.getElementById(“frameid”);

2. To execute the functions in the page, you must obtain the window object. Here is an important object contentwindow. You can execute the functions by obtaining this object, such as
frames.contentWindow.right();

The above codes are compatible with IE6, Firefox 3 and chrome 2.0. They all pass the test successfully. IE7 has not tried, but it should be no problem.