Use js to call js functions in iframe pages

Recently, I have been working on thesis proposals every day. I was itching to show my skills and design the Web again. Suddenly, I ran into a problem. In the past, when I designed WEB pages, I always ran them in IE. I never considered Firefox, let alone Chrome. But now it is different. At least I think that WEB pages that are not compatible with Firefox are extremely ugly and fake. So since I had this concept, I began to pay attention to compatibility when designing pages. This time, I encountered a compatibility problem. There is a floating frame in html, <iframe>, which can embed a page in the page. It is very suitable for making a frame page, as shown in the figure below.

An HTML page is divided into two parts, the left side is the navigation bar, and the right side is the content to be displayed. The code is as follows:
The code for 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. For the page I made, the preview effect is as follows:

Now what kind of effect can be achieved to achieve a more practical effect? Click any link and it will be displayed in the right column. Obviously, it needs to be implemented through js. I will not say much about the original incompatible method. Please remember the following implementation steps:
1. First, get the right column iframe object
var frames=document.getElementById("frameid"); //frameid is the id name of the iframe in the right column
2. Reset its src value
frames.src=pageurl; //pageurl is the destination page to be displayed, so the page jump is realized

But there is one more thing. If you want to call a function in it, it is not so simple. For example, there is a function right() in the right column. I want to call the right() function in the link in the left column. How can I achieve it?

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

2. To be able to execute the functions in its page, you must obtain the window object. There is an important object contentWindow here. After obtaining this object, you can execute the functions in it, such as
frames.contentWindow.right();

The above code is compatible with IE6, Firefox3, and Chrome2.0, and has passed the test successfully. I haven't tried IE7, but it should be fine.

<<: jQuery canvas generates a poster with a QR code

>>: Use Smart CSS to apply styles based on the user's scroll position