Recently, I have been doing papers and I was very skilled. I designed the web again and encountered a problem. In the past, when I designed WEB pages, I ran in IE, and 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 counterfeit, so from this concept, I started to pay attention to this compatibility when designing the page. This time I encountered a compatibility problem. There is a floating framework in the html, <iframe>, which can be embedded in the page, which is very suitable for making the frame page, as shown in the figure below.
An html page is divided into two pieces, with the navigation bar on the left and the content to be displayed on the right. The code is as follows:
The code in the left column is:
<IFRAME frameBorder=0 id=frmTitleLeft name=frameLeft 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:
What effect should be achieved now to achieve a more practical effect? Clicking on any link can be displayed in the right column. It is obvious that it needs to be implemented through js. I won’t say much about the original incompatible method. Please remember the following implementation steps:
1. First get the iframe object on the right column
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
This enables page jump
But there is another point, if you want to call the functions, it is not that 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 to implement it
1. First of all, the leftframe is embedded in the container page index.html, so you need to return to the index level first and get the rightframe object
var frames=window.parent.window.document.getElementById(frameid);
2. To be able to execute functions in its page, you must obtain the window object. Here is an important object, contentWindow. Obtain this object, and then you can execute the functions in it, such as
frames.contentWindow.right();
The above code is compatible with IE6, Firefox3, and Chrome 2.0. They all successfully passed the test. IE7 has not tried it, but it should be no problem.