Use js to call each other's js functions in the iframe page_HTML/Xhtml

Use js to call each other's js functions in the iframe page_HTML/Xhtml_web page production

WBOY

Release： 2016-05-16 16:43:03

Original

1328 people have browsed it

Recently, I was working on the thesis proposal report every day, and I was itching to design the Web again. I suddenly encountered a problem. When I designed the WEB page, I always ran it in IE. I had never considered Firefox, let alone Chrome, but now it is different. Well, at least I think WEB pages that are not compatible with Firefox are extremely ugly and fake, so ever since I had this concept, I started to pay attention to this compatibility when designing pages, and this time I encountered a compatibility problem, in HTML There is a floating frame, , which can embed a page in the page. It is very suitable for frame pages, as shown below, <a href="http://www.jb51.net/do/uploads/userup/0907/0Z95443K53.jpg" target="_blank"><img style="max-width:90%" alt="" src="http://files.jb51.net/do/uploads/userup/0907/0Z95443K53.jpg" style="max-width:90%" border="0"></a> An html page, divided into left and right Two pieces, the left is the navigation bar, and the right is the content that needs 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, just The preview effect of the page I made is as follows: <a href="http://www.jb51.net/do/uploads/userup/0907/0Z9552W101.gif" target="_blank"><img style="max-width:90%" alt="" src="http://files.jb51.net/do/uploads/userup/0907/0Z9552W101.gif" style="max-width:90%" border="0"></a> What kind of effect should be achieved now to achieve a more practical effect? Click on any link in it. If it is displayed in the right column, it obviously needs to be implemented through js. I won’t go into details about the original incompatible method. 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 the iframe in the right column 2, reset its src value frames.src=pageurl;//pageurl is the destination page to be displayed In this way, the page jump is realized But there is another point. If you want to call the function, it is not that simple For example, there is a function right() in the right column, and I want to call it in the left column. How to implement the right() function in the link of the column? 1. First, the leftframe is embedded in the container page index.html, so you need to return to the index level first and obtain 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. Here is an important object contentWindow, after obtaining this object, you can execute the functions in it, such as frames.contentWindow.right(); The above code is compatible with IE6, Firefox3, chrome2.0, and has successfully passed the test. IE7 has not Tried it, but it should be fine.