how to get element inner <iframe> of <iframe>? - javascript

i have simple webpage and in this webpage , tage and thats id "a1" , this contain inner one more tag, and thats id "a2". i want to get element tag that's id="a2" by using javascript .
please helpe me, how can i get <h1> tag using javascript :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>get element from inner iframe </title>
</head>
<body>
<h1>hello world</h1>
<iframe id="a1" >
<iframe id="a2">
<h1 id="b1">help me</h1>
<p id="b2" >for get HTML tag using javascript DOM</p>
</iframe>
</iframe>
</body>
</html>

First of all, you can't put HTML code directly inside an iframe.
You have to separate it into a different file, and then link it by adding a "src" attribute to the iframe.
Now, assuming you have 3 file:
index.html - that contains the reference first iframe (#a1) and points to iframe1.html
iframe1.html - that contains the reference to the second iframe (#a2) and points to iframe2.html
iframe2.html - that contains the desired h1 tag (#b1)
Here is the code you need to get to it:
var iframe1 = document.getElementById('a1');
var iframeDoc1 = iframe1.contentDocument || iframe1.contentWindow.document;
var iframe2 = iframeDoc1.getElementById('a2');
var iframeDoc2 = iframe2.contentDocument || iframe2.contentWindow.document;
var innerH1 = iframeDoc2.getElementById('b1');
Basically, you get each iframe, then you get its inner document, and then you look inside it.

An inline frame is used to embed another document within the current HTML document. Its better to user any other tag in place of iframe. As in your code h1 tag has and id attribute. You can get h1 tag by its id attribute.
var x= document.getElementById("b1");
alert(x.innerHTML);

use
var iframe = document.getElementById('iframeId');// your frame id here
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
Or you can use
window.frames['frameID'].document.getElementById('frameID')

Related

Manipulate ID element of iframe

I have attach iframe to my site and I have try many time to put value to iframe text box. But not working, Is there any way to put value to iframe.
I have try with
var test = $('#text').contents();
test.value="WELCOME";
Here My example.com/test/index.html
<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<label>Filed1
<label>
<textarea id="text"></textarea>
</div>
</body>
</html>
My iframe:
<iframe id ="test" width="350" height="400"
src="www.example.com/test/index.html" frameborder="1" ></iframe>
For IFrame there is a property named contentWindow, as so the frame contains the whole html page inside ; and there is the document which you can access to the inner contents of the iframe.
// html:
// <iframe id="a"></iframe>
var f = document.getElementById("a");
var fd = f.contentWindow.document;
to clear the content or address the src :
// clear content
element.src = "about:blank";
to write the content:
// write new content
var newHtml = '<html><body><textarea id="aa">Hello</textarea></body>'
f.contentWindow.document.open();
f.contentWindow.document.write(newHtml);
f.contentWindow.document.close();
and to access inner content elements:
fd.getElementById("aa").value = "orange";
// or in JQuery :
$("#aa",fd).val("Hello again");
Have you tried val ?, it will work on only same domain link !
$('#test').contents().find('#text').val('WELCOME');
Please make sure you put the javascript AFTER the iframe or put this in a onload event called from the iframe
thanks :)

How to get all nested iframes on document?

I found many related questions but none of them had a solution that worked for me, so apologies if this is a dupe.
I have the following HTML structure (simplified) :
<html>
<head>
</head>
<body style="">
<div>
<div>
<div>
<iframe>
<html>
<head></head>
<body>
<div></div>
<iframe>
<html>
<head></head>
<body>
<div>
<iframe src="about:blank">
<html>
<head></head>
<body>
<img />
<iframe id="some_random_id">
<html>
<head></head>
<body>
<div>
<!-- main content -->
</div>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</div>
</body>
</html>
</iframe>
</body>
</html>
</iframe>
</div>
</div>
</div>
</body>
</html>
And I would like to retrieve all the iframes, ideally in an array.
I have tried the following:
document.getElementsByTagName('iframe')
But that returns an array of size 1 : [iframe]
window.frames.length give me 1
I thought about doing something like :
var a = document.getElementsByTagName('iframe')[0]
var b = a.getElementsByTagName('iframe')[0]
// b is undefined
var b = a.contentDocument.getElementsByTagName('iframe')[0]
// b is undefined
Is there any way to retrieve all iframe on the page? Alternatively, just getting the last one (the one with the id some_random_id) would works as fine, but I can't use the id to select it since the html is created by a third party.
Edit: I don't think my question is a duplicate of using document.getElementsByTagName on a page with iFrames - elements inside the iframe are not being picked up
because the accepted answer in this question use:
for( j=0; j<m; j++) {
...
}
Where m is document.getElementsByTagName('iframe').length. But in my case it would have the value 1 and thus I couldn't access the nested iframes.
You are using the <iframe> tag absolutely wrong! You would like to read the documentation from <iframe> tag:
Permitted content: Fallback content, i.e. content that is normally not rendered, but that browsers not supporting the <iframe> element will render.
In other words the content between <iframe> and </iframe> tags will be rendered, if the browser do not support the <iframe> element.
You have two possibilities to use <iframe> tag:
In the src attribute from <iframe> tag you could write a path to HTML file.
In the src attribute from <iframe> tag you could write "about:blank" and then using JS you could add the content to this <iframe>.
If you want find some elements or manipulate the content from this iframes you could use the following code:
var iframe = document.getElementById('iframeId'),
innerDoc = iframe.contentDocument ? iframe.contentDocument
: iframe.contentWindow.document;
You should be sure that you have an access to your <iframe>.
Please read Cross-origin resource sharing (CORS) article about it.
If you want to get the count of all nested iframes on document you have to find it for each <iframe> separatelly and to add this count to your global iframe count variable. And do not forget about the CORS (see above).

Cannot Change InnerHTML of span class?

I'm new to JavaScript and I cannot understand why my html isn't changing?
I have an Iframe and I'm trying to change the .innerHTML of the span class that the Iframe has created in the DOM.
In the DOM structure, the class is called <span class="weather-location">China</span>
I'm just trying to access this by changing it's innerHTML to Taiwan instead.
here is my code:
<html>
<head>
<title>test</title>
</head>
<body onload="myFunction()">
<iframe class="weather" width="100%" height="600px" frameBorder="0"
src="(this is my iframe src code)></iframe>
<script type="text/javascript">
function myFunction() {
document.getElementsByClassName("weather-location")[0].innerHTML = "Taiwan";
}
</script>
</body>
</html>
When I test it in the console log, it brings up that weather-location as [] but whats also bizarre is when I use the selector tool to hover on that weather-location class and go back and re-type in the code it in the console, it changes the class how I wanted?
Also, I don't know if this helps but when it shows up as [] in chrome a little i box pops up saying "value below was evaluated just now".
You can't change the innerHTML of iframes if it's on another domain.
https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe
This kind of iframe is like a window into another webpage you have no control over.
If it is on the same domain you can use something like
var ifr = document.getElementById( yourIframeId );
var ifrDoc = ifr.contentDocument || ifr.contentWindow.document;
var theForm = ifrDoc.getElementById( yourFormId );
SO Question: accessing a form that is in an iframe
Credit to : #le_m

javascript: is it possible to target div of another file?

Let me explain the purpose of this. I'm using some CMS and I'm trying to customize it with php scripts of my own that I embedded to the home page with IFRAME. My php script gives back some links which I would like to open outside that IFRAME - as a part of some other CMS block on the homepage. The idea is to target (from my php script) the div of that CMS block which is already showing some data. Is that possible?
If you need to access <div> or any other element of parent window from its child iframe
USE:
var elem=window.parent.document.getElementById('target');
inside <script> tag of iframe's document.
ex.
file: index.html (Give any name).
<html>
<body>
<div id="div_to_use_from_parent">Blah!</div>
<iframe src="xyz.php" width="xx" height="xx"></iframe>
</body>
</html>
file: xyz.php (same as src of iframe)
<?php
echo<<<html
<html>
<head>
<script type="text/javascript">
function do_blah(){
var elem=window.parent.document.getElementById('div_to_use_from_parent');
elem.innerHTML="iframe changed My Content!";
}
</script>
</head>
<body onLoad="do_blah();">
This is iframe
</body>
</html>
html;
?>
OR
if you need to access element in iframe from parent window
USE:
var iframe = document.getElementById('idOfIframe');
var frame = iframe.contentDocument || iframe.contentWindow.document;
var yourDiv= frame.getElementById('div_you_want');
inside <script> tag of parent window's document.
ex.
file: index.html (Give any name).
<html>
<head>
<script type="text/javascript">
window.onload=function(){
var iframe = document.getElementById('idOfIframe');
var frame = iframe.contentDocument || iframe.contentWindow.document;
var elem= frame.getElementById('div_from_iframe');
elem.innerHTML+="<br /> And Parent window added this!";
};
</script>
</head>
<body>
<div id="div_to_use_from_parent">Blah!</div>
<iframe src="xyz.php" width="xx" height="xx"></iframe>
</body>
</html>
file: xyz.php (same as src of iframe)
<?php
echo<<<html
<html>
<body>
<div id="div_from_iframe"> This div from iframe</div>
</body>
</html>
html;
?>
parent window is the one in which original html(index.html) document along with your iframe(xyz.php) resides.
Hope it helps :-)!
var iframe = document.getElementById('idOfIframe');
var frame = iframe.contentDocument || iframe.contentWindow.document;
var yourDiv= frame.getElementById('div_you_want');
From the page running inside the <iframe> you can refer to the parent page as window.parent, and perform actions as you normally would.
parent.document.getElementById('target_div').innerHTML = 'New content.';
Note JavaScript's cross-domain restrictions apply. You can only do that if both pages belong to the same domain.
In case of links, you can include to your <a> tags the attribute target="_parent", or set it as base target to apply to all links.
<head>
...
<base target="_parent">
</head>
You can also target a link to another iframe, all you have to do is set a name="iframe_name" to it and set target="iframe_name" to all links that should open in that area.

Make an external css file only apply to some HTML

I am developing a website updater. My idea is to have certain HTML elements be part of the class updatable. I will then change each element with that class to a textarea element. That way it can be updated.
I am dividing the updater.html page into 2 areas; the left side a select element but the right side shows some HTML from the webpage I am updating. I want all the html on the right side to be affected by a specific css style sheet(the style sheet of the webpage I am updating). How can I do that?
Because the style sheet is external, I dont want to open the style sheet, read it into memory(is this possible in javascript) then insert it into the iframe that contains the updatable HTML.
<html>
<head>
</head>
<body>
<table>
<tr>
<td class="updaterSection">
<select>
<option> home </option>
...
</select>
</td>
<td class="updatableWebpage">
<!-- I want all the HTML in this div to be affected by the external css stlyle sheet -->
<iframe src="/css/specStyle.css">
<p> uneditable stuff </p>
<textarea> editable stuff </textarea>
</iframe>
</td>
</tr>
</table>
</body>
</html>
As far as i konw, this is not how you use an iframe,
The inside of the <iframe> will be replaced by the page put in the src.
The code you posted is just going to display the css page on your webpage. (a simple example using you code: http://jsfiddle.net/W5ggT/ )
So either you put all the html that is inside your iframe into a new html page which contains a link to the special stylesheet in its header.
Or you use some ajax to refresh that, but I'm not sure to fully understand what you want.
You can manipulate the DOM of the html webpage inside your iframe using javascript.
That is only possible if it is in the same domain.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Iframe manipulation</title>
<script type='text/javascript'>
window.onload = function () {
var iframe = document.getElementById('iframe');
// cross browser solution for handling iframe
var contentProp = (iframe.contentWindow)?iframe.contentWindow.document:iframe.contentDocument;
var head = contentProp.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.rel = "stylesheet";
link.type = "text/css";
link.href = "/stylesheet/css.css"; // the new stylesheet to add to iframe
head.appendChild(link);// adds stylesheet to iframe
});
</script>
</head>
<body>
<iframe id='iframe' src='test2.html'></iframe>
</body>
</html>
add external.css your css file in the head section (within tag).
<html>
<head>
<link rel="stylesheet" type="text/css" href="path to the css file">
</head>
<body> </body>
</html>
give a different class name to the tag that you want to style. But the style in your external.css file.
Hope it helps.

Categories