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();
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 JavaScript parameter object with some HTML content in the following structure.
function (type, content, title) {
// Replace code should go here
options = {
"data-onclick": null;
"data-progress": false;
}
}
The content of the content object looks as follows:
<div id=content data-onclick="onclickValue" data-progress="true"></div>
I would like to read out the data- parameters from the HTML div and assign them to replace the same named function in the JavaScript function.
All of this should happen at the top of my JavaScript function and replace the properties in the same function.
Thanks for any help or pointers how to achieve this, I am not very skilled at JavaScript.
// first select the html element
var element = document.getElementById('content');
// use the getAttribute('attribute-to-get') method to get your attributes
var options = {
'data-onclick': element.getAttribute('data-onlick'),
'data-progress': element.getAttribute('data-progress')
};
// consider using a hidden input field rather than hiding the element with css
// this is best practice
<input type="hidden" id="content" data-onclick="onclickValue" data-progress="true" />
What I would do (assuming jQuery):
create an invisible div in your html
set the innerHTML of the div
set the attributes from those of the invisible div to your object:
$("#invisible").html(content);
options["data-onclick"] = $("#invisible").find("#content").attr("data-onclick");
options["data-progress"] = $("#invisible").find("#content").attr("data-progress");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="invisible" style="display: none;">
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;
}
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">.
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();