Typical Case of Javascript iframe framework-PHP source code

The operation of iframe is an unreliable method for many previous sections. In fact, the operation of iframe is very good and compatible. Let's look at a classic example of the operation of iframe. The operation of iframe is an unreliable method for many previous sections. In fact, the operation of iframe is very good and compatible. Let's look at a classic example of the operation of iframe.

Script ec (2); script

Although iframe is rarely used in web development, iframe is still worth using, such as embedding external advertisements. When using iframe, we may encounter many problems, such as iframe Parent-Child Window value passing, iframe adaptive height, iframe cross-origin communication, and so on.

In practice, we often need to directly obtain the elements of the Child Window page in the parent window and operate on it. Today, I am going to use examples to show you how to use Javascript to operate on dom objects between iframe and parent-child windows.
HTML

For better understanding and demonstration, we need 3 pages. The html structure of the parent page index.html is as follows. The other two child pages are named iframea.html and iframeb.html. Struct element.

Obtain the value in iframeA from the parent window.
Set the value in iframeA in the parent window
Set the h1 tag background color of iframeA in the parent window

-- Operation result --

IframeA.html assigns an h1 title, an input box, and a p section. The structure is as follows:





Helloweba.com



Iframe

Welcome to helloweba.com!

IframeB.html also provides h1 titles, paragraphs, and input boxes. Iframe has two buttons. javascript is called and relevant code is described in the js section.




Helloweba.com



Iframe B

Helloweb.com

IframeB Child Window operation parent window
IframeB operation subwindow iframeA

Javascript

The page html has been configured. Now let's look at the Javascript section.
First, let's take a look at the operations on the index.html parent page. Javascript uses the contentWindow attribute to operate the dom in iframe. The contentWindow attribute refers to the window object where the specified frame or iframe is located. In IE, the iframe or the contentWindow attribute of the frame can be omitted, to edit an iframe object in Firefox, you must specify the contentWindow attribute. The contentWindow attribute supports all mainstream browsers.
We have customized the function getIFrameDOM (), passed in the iID parameter to obtain the iframe, and then the operation is the same as the operation for getting elements on the current page.

Function getIFrameDOM (iID ){
Return document.getelementbyid(iid+.content+doc ument;
}
The code for the three buttons in index.html is as follows:

Function getValiframeA (){
Var valA = getIFrameDOM ("wIframeA"). getElementById ('iframea _ ipt'). value;
Document. getElementById ("result"). innerHTML = "get the value in the input box of the subwindow iframeA:" + valA + "";
}

Function setValiframeA (){
GetIFrameDOM ("wIframeA"). getElementById ('iframea _ ipt'). value = 'hellowebba ';
Document. getElementById ("result"). innerHTML = "set the value in the input box of iframeA in the subwindow: Helloweba ";
}

Function setBgiframeA (){
GetIFrameDOM ("wIframeA"). getElementById ('title'). style. background = "# ffc ";
}

After saving, open index.html to check the effect. It's easy to operate.
The two buttons in iframeb.html call js. The Code is as follows:

Function child4child (){
Var parentDOM = parent. getIFrameDOM ("wIframeA ");
ParentDOM. getElementById ('hello'). innerHTML = "does the value in the input box change? ";
ParentDOM. getElementById ('iframea _ ipt'). value = document. getElementById ("iframeB_ipt"). value;
Parent.doc ument. getElementById ("result"). innerHTML = "subwindow iframeB operates the subwindow iframeA ";
}
Function child4parent (){
Var iframeb_ept = document. getElementById ("iframeB_ipt"). value;
Parent.doc ument. getElementById ("result"). innerHTML ="

Input box value in the subwindow: "+ iframeB_ipt +"

";
}
Specify ument to operate the parent page element.
This article explains the basic operations of Javascript on iframe in combination with examples. Next we will introduce the application of iframe: Adaptive height and iframe cross-domain issues. Stay tuned.