» » Operate iframe by Javascript


Operate iframe by Javascript

Author: bamboo06 on 1-01-2016, 14:10, views: 2301

Although we use iframe in web development is relatively small, but still has its worth using iframe scenes, such as embedded external advertising. In the process, we may use iframe will encounter many problems, such as parent-child window by value iframe, iframe highly adaptive, iframe cross-domain communication and so on.

In practical applications, we often direct access to the child window page element in the parent window and manipulate them. Today I'll use examples to introduce how to use javascript to interoperate between father and son window dom iframe object started working.

In order to better explain and demonstrate, we are ready to three pages, html structure of the parent index.html page as follows. The other two sub-pages were iframeA.html and iframeB.html. We need to demonstrate through the parent page to get and set the elements subpages iframeA.html values, and the values and the operating parent page index.html elements demonstrate through subpages iframeB.html set subpages iframeA.html related elements.
	<div class="opt_btn">
		<button onclick="getValiframeA();">Parent window to get the value of iframeA</button>
		<button onclick="setValiframeA();">Parent window to set the value in iframeA</button>
		<button onclick="setBgiframeA();">Parent window set H1 iframeA label background color</button>
	<div id="result">--Operating results--</div>
	<div class="frames">
		<iframe id="wIframeA" name="myiframeA" src="iframeA.html" scrolling="no" frameborder="1"></iframe> 
		<iframe id="wIframeB" name="myiframeB" src="iframeB.html" scrolling="no" frameborder="1"></iframe>
		<div class="clear"></div>

iframe.html arranged a h1 title, and an input box and a p paragraph, is structured as follows:
<meta charset="utf-8">


<h1 id="title">iframe A</h1> 
<input type="text" id="iframeA_ipt" name="iframeA_ipt" value="Welcom to goocode">
<p id="hello">Welcome to Goocode.net!</p> 

iframe.html also arranges h1 heading and paragraphs and the input box. iframe has two buttons, calls the next javascript, and other relevant code section will be described in js.
<input type="text" id="iframeB_ipt" name="iframeB_ipt" value="1,2,3,4">
<button onclick="child4parent();">IframeB child window operates parent window</button> 
<button onclick="child4child();">IframeB operates child window iframeA</button> 

Html pages are arranged Well, now we look at javascript section.
First, we look at the operation of the parent index.html page. JS iframe in the dom operation but use contentWindow property, contentWindow attribute refers to the specified frame or iframe window where the object, iframe or frame of contentWindow attribute may be omitted in IE, but in Firefox if you want to edit the iframe object, You must specify contentWindow property, contentWindow property supports all major browsers.
We customize the function getIFrameDOM (), passing parameters to obtain iID iframe, just after the current page for the operation of the same element.
function getIFrameDOM(iID){ 
    return document.getElementById(iID).contentWindow.document; 

index page's three button operation code is as follows:
function getValiframeA(){
	var valA = getIFrameDOM("wIframeA").getElementById('iframeA_ipt').value;
	document.getElementById("result").innerHTML = "Get the value of the input box in the child window iframeA:<span style='color:#f30'>"+valA+"</span>";

function setValiframeA(){
	getIFrameDOM("wIframeA").getElementById('iframeA_ipt').value = 'Goocode.net';
	document.getElementById("result").innerHTML = "Set the value in the input box in the child window iframeA:<span style='color:#f30'>Goocode.net</span>";

function setBgiframeA(){
	getIFrameDOM("wIframeA").getElementById('title').style.background = "#ffc";

After saving, open index page, it is very simple, isn't it?
Well, iframeB.html two button operation called js, code is as follows:
function child4child(){
	var parentDOM=parent.getIFrameDOM("wIframeA");
	parentDOM.getElementById('hello').innerHTML="<span style='color:blue;font-size:18px;background:yellow;'>See the value in the input box change?</span>";
	parentDOM.getElementById('iframeA_ipt').value = document.getElementById("iframeB_ipt").value;
	parent.document.getElementById("result").innerHTML="Child window iframeB operates child window iframeA";
function child4parent(){
	var iframeB_ipt = document.getElementById("iframeB_ipt").value;
	parent.document.getElementById("result").innerHTML="<p style='background:#000;color:#fff;font-size:15px;'>The value of the box from child window comes:<span style='color:#f30'>"+iframeB_ipt+"</span></p>";

Subpages iframeB.html by using parent.getIFrameDOM () calls the custom function getIFrameDOM negative page (), so you can pair the same level of sub-pages iframeA.html operation, subpages can also use parent.document operation the parent page elements.
In this paper, javascript examples to explain the basic operation of the iframe, then we will introduce iframe applications: highly adaptive and cross-domain iframe issues, so stay tuned.

Category: Javascript

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
  • 0 Articles
9 July 2017 14:34


  • Group: Guests
  • –†Registered date: --
  • Status:
Luxottica, which makes prescription eyeglasses replica omega watches and sunglasses under a variety of brands, and Essilor, a maker of cheap christian louboutin lenses, are the two largest companies in the sector, with Luxottica having replica ray ban a 14 percent market share and Essilor a 13 percent share, according to replica handbags the market research firm Euromonitor International. Johnson & Johnson is the next cheap yeezy boost largest, with a 3.9 percent share.

  • 0 Articles
7 February 2018 23:17


  • Group: Guests
  • –†Registered date: --
  • Status:
Search for unforgettable Escort Romania VIP escorts to entertain you during the day or night in Bucharest, Brasov, Sibiu. The delightful VIP escorts listed on bestromanianescorts.com will enhance your Romanian vacation! Bucharest escorts female models, independent escorts and adult ads with photos. Classified ads added daily with photos and contact information. Check out the verified VIP and PREMIUM escorts listed at BestRomanianEscorts.com for the best Romanian escort service experience!

  • 0 Articles
19 February 2018 00:52


  • Group: Guests
  • –†Registered date: --
  • Status:
I felt exceptionally glad while perusing this site. Blake

Comment on the news site is possible only within (days) days from the date of publication.