I'm trying to take the contents of a div within an iframe, delete the iframe, and display only the div. I can't figure out why this won't work- I am not sure of whether to use contentWindow or contentDocument.. Any pointers? Thanks!
I have one div with id "iframe", within that the iframe with id "embedded_article",
<script type="text/javascript">
function getContentFromIframe()
{
var parent = document.getElementById('iframe');
var child = document.getElementById('embedded_article');
var oldContent = child.contentWindow.document.innerHTML;
var newContent = child.contentWindow.document.getElementById('ec-article').innerHTML;
document.getElementById('iframe').removeChild(document.getElementById('embedded_article'));
parent.innerHTML = newContent;
}
</script>
Your example:
document.getElementById('iframe').removeChild(document.getElementById('embedded_article'));
Should look something like:
var element = frames['iframe'].document.getElementById('embedded_article');
element.parentNode.removeChild(element);
window.frames['yourFrameId'] evaluates to the window object associated with your frame. when you use document.getElementById, you want to use the document belonging to your frame's window, not the document in your main window. The rest should be self-explanitory.
to get to the div inside an iFrame you can try something like this
var div = document.getElementById("YourIFrameID").contentWindow.document.body.getElementById("YOUR_DIV_ID")
Related
I have an HTML page say main.html which has an iframe (say id="myFrame")showing child.html page. Both of these pages have a button called "Hide frame". The onclick of these buttons calls hideFrame() JS function which is declared in main.js file. The hideFrame() function just change the display of myFrame to "none".
function hideFrame(){
document.getElementById("myFrame").style.display = "none";
}
The myFrame is in main.html file so the button in main.html when calls the hideFrame() function, it works. The frame gets hidden. But the same is not working if I call the function from child.html page.
How can I access this element (myFrame) form child.html page?
you should use the main.html's window object to assign the function to. So instead of
function hideFrame(){
document.getElementById("myFrame").style.display = "none";
}
you would do something like
window.hideFrame = function(){
document.getElementById("myFrame").style.display = "none";
}
Now the function is globally scoped on main.html's window.
The child frame has it's own window object. You need access to the parent window object to call the function from child.html.
From main.html, you can call hideFrame normally on click onclick = hideFrame(), but in child.html, you should put onclick = window.parent.hideFrame()
Instead of using an iFrame, I would use jquery to load in segments of html files from other files.
If that is not possible, you could inject Javascript code into the child frame that references objects in the parent. Ex:
child:
<script>
var x;
</script>
parent:
<script>
$("#myFrame").x = function(){
functionality / reference definitions
}
</script>
It took a while to understand what you are saying. From what I understand, you want to get access to an element on the top window from inside an iframe. Here is what to get access to the parent window:
var _parent = window.parent,
_parent_dom = _parent.document;
Then to get access to an element from the parent page (in this case #myFrame):
var my_frame = _parent_dom.getElementById("myFrame");
I am trying to understand importNode in html using the following example.
Suppose we have a content.html:
<html>
<body>
<nav id="sidebar1" class="sidebar">
Hi there!
</nav>
</body>
</html>
and a main.html:
<html>
<body>
<iframe src='content.html' hidden='true'></iframe>
<script>
var idframe = document.getElementsByTagName("iframe")[0];
var oldNode = idframe.contentWindow.document.getElementsByTagName("nav")[0];
var newNode = document.importNode(oldNode, true);
document.getElementsByTagName("body")[0].appendChild(newNode);
alert("HI!!!");
</script>
</body>
</html>
I am getting the error:
TypeError: Argument 1 of Document.importNode is not an object.
var newNode = document.importNode(oldNode, true);
What is the proper way to get an element form an iframe and insert it into my html?
You can only access content of the iframe document after the iframe document has been loaded. This can be accomplished different ways:
either by putting your accessing code into load handler of the main (that contains iframe element) document window,
or inside a DOMContentLoaded event listener of the document loaded in iframe.
Below is example of using load event of window of the main document:
window.addEventListener('load', function() {
var iframe = document.getElementsByTagName("iframe")[0];
var oldNode = iframe.contentWindow.document.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.body.insertBefore(newNode, document.body.firstChild);
}, false);
Otherwise, iframe content is not yet loaded when you try to access it.
See the live example at JSFiddle (iframe content is placed encoded in the srcdoc attribute of the iframe just because I'm not aware of ability to create subdocuments at JSFiddle without creating a separate fiddle).
I have an iframe inside a view and in the src of the iframe I am rendering another view. Now I want to get the data of header h2 which is having some id and is present inside the second view rendered inside the src of the iframe.
Please help me out with your ideas and suggestions
Examples to access your iframe document:
var frame = document.getElementsByTagName("iframe")[0].contentDocument; // first iframe in page
// or
var frame = window.frames["myFrame"].document; // if your frame has the name "myFrame"
// or
var frame = document.getElementById('myFrame').contentWindow.document; // if your frame has the id "myFrame"
Then you can access your H2 tag inside the iframe with:
var h2 = frame.getElementsByTagName("h2")[0];
jQuery solution:
var frame = $("selector").contents(); // where selector is "#myFrameID" or ".myFrameClass", etc...
var h2 = frame.find("h2");
I have a page that looks like this:
<div class="myclass" id="div1"><iframe id="frame1" src="myiframe.html"></div>
<div class="myclass" id="div2"><iframe id="frame2" src="myiframe.html"></div>
In my iframe, I need to know the id of the div of its parent node, but I don't know how.
I searched for a solution without jquery but all I found was something with getElementById stuff and I am actually searching for the id.
Can someone help me?
You must know that, as far as your JS code inside the iFrame is concerned, the window is the iFrame, and the document is the content of that iFrame. Here's a little function that should work for you, in order to the parent's document:
var parentDoc = window;
while(parentDoc !== parentDoc.parent)
{
parentDoc = parentDoc.parent;
}
parentDoc = parentDoc.document;
var iFrames = parentDoc.getElementsByTagName('iframe');
var divs = [];
for(var i=0;i<iFrames.length;i++)
{
divs.push(iFrames[i].parentNode);//assuming the first parent is the div
}
That should do the trick
try like this:
parent.document.getElementById("div id")
var parentDivOfIfame1 = $("#frame1", parent.document).parent();
I am new to web developing and I am looking to use javascript to create a dynamic page that without reloading the page it will change the content of three different divs (div #1 would be some text with an specific W and H, div #2 would be a picture and dive #3 would be a larger picture)
Thank you so much in advance for your help.
What you simply need to do is attach an event handler some to some event, and then, through javascript, change out the DOM elements for your new view. For example, clicking on a link or button will initiate this change:
<script type="text/javascript" language="javascript">
document.getElementById('myElement').attachEvent('click', function()
{
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
// modify div1, div2, div3 properties, child nodes, etc
});
</script>
In this situation, I would definitely recommend using jQuery to greatly simplify the amount of code that you will need to write.
I wasn't sure exactly how you were getting the text and image links and if you were using JQuery or not, so this is about as generic as I can put it. You can make it more dynamic by passing the text and image links to the function.
function load_divs(){
var div1 = document.getElementById('IDDIV1');
var div2 = document.getElementById('IDDIV3');
var div3 = document.getElementById('IDDIV3');
div1.style.height = ###px;
div1.style.width = ###px;
div1.innerHTML = 'PUT YOUR TEXT HERE';
div2.innerHTML = '<img src="LINK_TO_IMG" />';
div3.innerHTML = '<img src="LINK_TO_LARGER_IMG" />';
}