The html is like this
<iframe id="MainFrame">
<div id="Maintest">This is main text
<div id ="SecondTest">This is second layer
<div id="ThirdTest">This is third layer</div>
</div>
</div>
</iframe>
The javascript to access elements in frame is like this
var iframe = document.getElementById('MainFrame');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
console.log(iframe);
var mydiv = innerDoc.getElementById("Maintest");
console.log(mydiv);
var seconddiv = innerDoc.getElementById("SecondTest");
var thirddiv = innerDoc.getElementById("ThirdTest");
console.log(seconddiv+thirddiv);
mydiv, seconddiv as well as thirddiv give null.I have seen on many posts that this is the way to access iframe element.I dont know why its giving null.Help appreciated.
Thanks
Swaraj
Your implementation for using an iframe is incorrect, I believe. Any content within <iframe> tags is what would be displayed for a browser that does not support iframes. There are only two ways to insert content into an iframe that I'm aware of:
<iframe src="/example/content.html">Your browser doesn't support iframes.</iframe>
and using javascript to append child nodes to the iframe using your innerDoc reference, such as:
innerDoc.body.appendChild(child_ref);
UPDATE:
Just to be clear, the html content you want to reference within your iframe needs to be in a separate file, such as my_content.html and the iframe needs to reference that file in the "src=" field, like: <iframe src="my_content.html">.
Related
I have a webpage where there is a textarea within a iframe. I need to read the value of this textarea from its child page JavaScript. Presently by using window.parent.getelementbyID().value in the JavaScript, I am able to fetch values of all controls in the parent page except the textarea within the iframe.
The frame id and frame name in my parent page changes in runtime, hence we cannot use the frame id/frame name for reference.
If you have the HTML
<form name="formname" .... id="form-first">
<iframe id="one" src="iframe2.html">
</iframe>
</form>
and JavaScript
function iframeRef( frameRef ) {
return frameRef.contentWindow
? frameRef.contentWindow.document
: frameRef.contentDocument
}
var inside = iframeRef( document.getElementById('one') )
inside is now a reference to the document, so you can do getElementsByTagName('textarea') and whatever you like, depending on what's inside the iframe src.
Using jQuery you can use contents(). For example:
var inside = $('#one').contents();
I have a webpage where there is a textarea within a iframe. I need to read the value of this textarea from its child page JavaScript. Presently by using window.parent.getelementbyID().value in the JavaScript, I am able to fetch values of all controls in the parent page except the textarea within the iframe.
The frame id and frame name in my parent page changes in runtime, hence we cannot use the frame id/frame name for reference.
If you have the HTML
<form name="formname" .... id="form-first">
<iframe id="one" src="iframe2.html">
</iframe>
</form>
and JavaScript
function iframeRef( frameRef ) {
return frameRef.contentWindow
? frameRef.contentWindow.document
: frameRef.contentDocument
}
var inside = iframeRef( document.getElementById('one') )
inside is now a reference to the document, so you can do getElementsByTagName('textarea') and whatever you like, depending on what's inside the iframe src.
Using jQuery you can use contents(). For example:
var inside = $('#one').contents();
I have two pages on the same domain. Home.html and page2.html are their names.
home.html has the following content
<html>
<iframe id="one" src="page2.html" style="display:none"></iframe>
<div id="container">
<h1>Title of Page</h1>
<div id="ShowHere"></div>
</div>
</html>
page2.html has the following content.
<html>
<div id="container">
<span id="target">Some Text</span>
</div>
<span>Don't Show This Text</span>
</html>
I would like to use some javascript to get the contents of "target" from within the iframe with Id="one" on the page home.html and then change the innerhtml of the element id=ShowHere to show the html within the element "target" such that, it shows the words "Some Text" under the word "Title of Page".
I think that the following is a start, put at the bottom of home.html:
<script>
var frameSource = document.getElementById("one").contentWindow.document.documentElement.outerHTML;
// ANSWER TO MY QUESTION
document.getElementById("ShowHere").innerHTML = frameSource;
</script>
I've searched around and seen a few answers that supposedly do this, but none which provide a meaningful explanation of HOW to do this, and none which I can get to work. I'd prefer to use plain vanilla javascript, but Jquery is alright too.
Based on what I am trying to do, which is get the content (i.e. innerhtml) of a div from another page on the same domain, I wonder if there is a better approach than creating an invisible iframe and then reading it. Answers which achieve the desired result, but through another mechanism are also welcome.
Using the answer for this question
So, firstly you have to find the iframe:
var iframe = document.getElementById('one');
Then you should get the iframe contents:
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
And now you can use getElementById to find DOM-elements in the iframe:
var iframeContent;
if (iframeDocument) {
iframeContent = iframeDocument.getElementById('target').innerHTML;
}
Now in the iframeContent you have the contents of span you need to show on the main page, so you can just find element where you want to display iframeContent and set the innerHTML property:
var divToShow = document.getElementById('ShowHere');
divToShow.innerHTML = iframeContent;
And that's all.
I hope my answer will help you to solve your problem.
Thanks : )
You can use selectors (like getElementById, etc) in iframes similar to those found in your normal window via iframe.contentWindow.document.
So if you wanted to get the contents of target on the second page, you can get it via document.getElementById("one").contentWindow.document.getElementById("target")
Edit:
You also probably should wait until the iframe is loaded before trying to read elements from it. So altogether:
var init = function(){
var frameDocument = document.getElementById("one").contentWindow.document;
document.getElementById("ShowHere").innerHTML = frameDocument.getElementById("target").innerHTML;
};
if(document.getElementById("one").contentWindow.document.getElementById("target")) { // iframe is loaded
init();
} else {
document.getElementById("one").contentWindow.onload = init;
}
I want to display my html string in this iFrame.
Actually I am confused whether it should be displayed in iFrame or Div.
Code:
$("body").append("\
<div id='wikiframe'>\
<div id='wikiframe_veil' style=''>\
<p>Loading...</p>\
</div>\
<iframe id='wikiIDframe'></iframe>\
</div>"
);
I want to display HTML which is in a string s="<body>....</body>
In this iFrame how do I Do it. Could any body help me with that.
You can append your string s to your iframe by doing the following:
jQuery
var s = '<body><div>hello</div></body>'; // example s string
var textBody = $(s); // make s into jquery object
var iframeBody = $('#wikiIDframe').contents().find('body'); // get the body from the iframe
iframeBody.append(textBody.html()); //append s html into iframe
Example
An iframe is used to embed another document within the current HTML document.Which means if you want see a webpage inside a webpage, u can use iframe.
<iframe src="http://www.stackoverflow.com"></iframe>
see this example http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
If you want to display your text then use a div instead.In jquery you can use it like the below code
$("#your_div_id").html("yourstring here");
Has anyone thought about this?
HTML
<iframe id="iframe" style="width:500px;height:400px;"></iframe>
JS
var myHTML = "<div id='wikiframe'><div id='wikiframe_veil' style=''><p>Loading...</p></div><iframe id='wikiIDframe'></iframe></div>";
document.getElementById('iframe').src = 'data:text/html,<html><body>' + myHTML + '</body></html>';
Try it on http://jsfiddle.net/Kqd8R/1/
I have a webpage where there is a textarea within a iframe. I need to read the value of this textarea from its child page JavaScript. Presently by using window.parent.getelementbyID().value in the JavaScript, I am able to fetch values of all controls in the parent page except the textarea within the iframe.
The frame id and frame name in my parent page changes in runtime, hence we cannot use the frame id/frame name for reference.
If you have the HTML
<form name="formname" .... id="form-first">
<iframe id="one" src="iframe2.html">
</iframe>
</form>
and JavaScript
function iframeRef( frameRef ) {
return frameRef.contentWindow
? frameRef.contentWindow.document
: frameRef.contentDocument
}
var inside = iframeRef( document.getElementById('one') )
inside is now a reference to the document, so you can do getElementsByTagName('textarea') and whatever you like, depending on what's inside the iframe src.
Using jQuery you can use contents(). For example:
var inside = $('#one').contents();