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 :)
Related
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
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')
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.
I have the following HTML
<iframe id ="myIframe">
#document
<head>...</head>
<body>Text I want to get is here</body>
</iframe>
I only know the iframe's id. Using JavaScript, how can I extract the text from the body?
Assuming your iframe is in the same domain as your HTML:
var myIFrame = document.getElementById("myIframe");
var content = myIFrame.contentWindow.document.body.innerHTML;
Otherwise you'll face some Same Origin Policy issues.
I'm sure this is pretty basic, but I can't seem to get any of the solutions I've found to work for me. Basically, I need to get the contents of a div from an iframe, and write them to a div in the parent page. This is what I have:
<iframe src="slideshows/slideshow/case2.html" frameborder=0 scrolling="no"
id="frame1" name="frame1"></iframe>
<div id="caption">
<script type="text/javascript">
var caption = frame1.document.getElementById('slidecaption');
document.write(caption);
</script>
</div>
'slidecaption' is the name of Id in the iframe that I'm trying to grab.
All I get is "null". Is it because the iframe contents haven't loaded yet? If so, how do I delay until the iframe has loaded?
Thanks,
Scott
Thanks to both of you for your help. I figured it out, based on Márcio's idea:
I put the function in the parent page:
<script type="text/javascript">
function send() {
document.getElementById('slidecaption').innerHTML =
frame1.document.getElementById('slidecaption').innerHTML}
</script>
And I put the call in the iframe document:
<body onload="parent.send();">
Regards,
Scott
I'm not sure this is the only thing you need to do, but you certainly need to retrieve frame1 from the dom.
<script type="text/javascript">
var frame1 = document.getElementById('frame1');
var caption = frame1.contentWindow.document.getElementById('slidecaption');
document.write(caption);
</script>