Copy innerHTML of an iframe within another iframe - javascript

I stumbled a website like this, let's call it home.html
<body>
<iframe id='id1' src="1.html">
</iframe>
</body>
In 1.html, we got
<body>...
<iframe id='id2' src="2.html">
</iframe>
...
</body>
How can I get the HTML content of 2.html with JavaScript? The reason I do not go directly to 2.html to get the content is because the content is simply a template and get changed dynamically at the home.html
Usually, i would just do like below to get the content of an iframe id but it doesn't work in this case.
var e = document.getElementById('myid').html;
Thank you.

Try this,
var iFrame = document.getElementById('id1');
var iFrameBody= iframe.contentDocument || iframe.contentWindow.document;
content= iFrameBody.getElementsByTagName('body')[0].innerHTML;
alert(content);

your iframes src should be same to your main page domain. Different domain content access is blocked by browsers. Same domain iframe contents can be accessed.

It is not enough to copy just BODY tag content between iframes, but you need to copy HEAD tag content as well to get the same design of new iframe
var iFrameDocument= iframe.contentDocument || iframe.contentWindow.document;
alert(iFrameDocument.head.innerHTML);
alert(iFrameDocument.body.innerHTML);

If you want to copy the body with his properties you can now do :
iframe1.contentWindow.document.body = iframe2.contentWindow.document.body.cloneNode(true);
cloneNode(true) will copy every child of the specified node

Related

how can i use javascript to remove iframe's html tag?

I want to remove iframe's content but keep the "iframe tag" unchanged
like:
<iframe>
<html>
...
</html>
</iframe>
change to
<iframe>
</iframe>
I tried this:
var frame_node = document.getElementsByTagName("iframe")[0];
frame_node.removeChild(frame_node.firstChild);
But I got an error: frame_node.firstChild is not an object
So how to do this?
thx
got the answer:
document.getElementsByTagName("iframe")[0].contentWindow.doc‌​ument.getElementsByT‌​agName("html")[0].re‌​move();

Jquery get iframe document and set another iframe

I am attempting to create some functionality which will get and set the document of an iframe. I have been unsucessful at performing this with jquery.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" ></script></head>
<body>
<iframe sandbox="allow-same-origin allow-scripts" id='a' height="700" width="700" src="http://localhost:8181/website"></iframe>
<iframe sandbox="allow-same-origin allow-scripts" id='b' height="700" width="700" src="http://localhost:8181/website"></iframe>
</body>
</html>
When the page loads I need to navigate around in iframe a. At which point I will use javascript or jquery to take the doucment of A and replace B's document with it. Is this even possible? I don't necessarily need to use iframes if there are other options.
Scenario:
1. Page loads, iframe a & b are rendered
2. User navigates inside iframe A to different pages
**below this is functionality I cannot figure out
3. User clicks button to take DOM from iframe a and replace the DOM for Iframe b
This will essentially set the content of iframe b to be where the user had navigated in iframe a
There is a question about jquery and iframe.
The .contents() method can be used to get the content document of an iframe, if the iframe is on the same domain as the main page.
This should work:
var theHtmlStringToSet = $('#frameA').contents().find('body').html();
$('#frameB').contents().find('body').html(theHtmlStringToSet);

remove/replace specific HTML from inside iframe using Javascript

Okay so in my page I have an iframe element which will load HTML that will always have a specific line of HTML code in it that I need to replace when the iframe is loaded. The iframe src will vary so it has to be done as the iframe is loaded. The HTML I want to replace is in the file that's loaded by the iframe and it will look something like this:
<div class="myclass1" style="height:XXXpx; width:YYYpx;">
So what I need is actually for every div that has class="myclass1" to have the height attribute of the style stripped and the width kept whatever it was. All "myclass1" divs will follow this format. So I want to replace all lines like that with this:
<div class="myclass1" style="width:YYYpx;">
I'm not very experienced with javascript at all really so any help, even just pointers, is appreciated because I don't know how to start of even if this is possible.
If the src of the iframe is on the same domain, use this :
var iFrame = document.getElementById("your-iframe-id");
if ( iFrame.contentDocument )
{
iFrameDocument = iFrame.contentDocument;
}
else if ( iFrame.contentWindow )
{
iFrameDocument = iFrame.contentWindow.document;
}
The use iFrameDocument.getElementById or whatever you need
You can use the following example for change the styles of loaded div,Call the javascript function after loading the page .
<html>
<head>
<script type="text/javascript">
function change_style()
{
document.getElementById("div_id").style.width="yyypx";
}
</script>
</head>
<body>
<div id="div_id" class="myclass1" style="height:XXXpx; width:YYYpx;">
-------------------
-------------------
</div>
<script>
change_style();
</script>
</body>
</html>

Access iframe's top html and body tag

I have the following iFrame structure , I want to access the html and body tag of top html, so I can sroll view top in click of button inside iframe.
<html>
<body>
<div>
<iframe>
<html>
<body>
content
<input>button</input>
</body>
</html>
</iframe>
</div>
</body>
</html>
Use the top object (which only works at the same domain):
var topDocument = top.document;
//do anything you want
//Example:
topDocument.documentElement; //Returns a reference to the HTML element
topDocument.body; //Returns a reference to the top's body
If you want to access the very first HTML element, use this:
$("html:first")
And if you need to access the other HTML element through the iframe you can use this: $("iframe").children("html")
$("iframe").children("html")
You can use "top" keyword.
Like
top.id.document where id is the 'id' of any element in top html of iframe.
You need to access that from the source of iframe's html.

access iframe name from inside iframe

I though this would be simple enough but I can't find the answer. I need to know how I can access an iframe's name from within said iframe. I was trying something like this but it's not working.
<iframe name="thename">
<script type="text/javascript">
alert(parent.name);
</script>
</iframe>
There is a combination of answers I prefer:
// window.frameElement Gets IFrame element which document inside
window.frameElement.getAttribute("Name");
It works on IE7+, Mozilla & Chrome
You were nearly right. Setting the name attribute on a frame or iframe sets the name property of the frame's global window object to that string. (Not parent, which refers to the window of the document that owns the frame.)
So unless some other script has deliberately changed the name, it's as simple as:
1.html:
<iframe name="tim" href="2.html"></iframe>
2.html:
<script type="text/javascript">
alert(window.name); // tim
</script>
in some cases window.frameElement returns null in iframe, so i figured workaround for it.
1. you need to set hash in src url of iframe
<iframe name="tim" href="2.html#your-hash"></iframe>
2. in iframe you can get this hash with
<script type="text/javascript">
var hash = window.location.hash;
</script>
Well, an IFRAME element shouldn't contain anything, it's targeting another document. So using a SCRIPT tag inside an IFRAME doesn't make alot of sense. Instead, use the SCRIPT inside the called document, e.g.
iframe_caller.html:
<html>
<body>
<iframe id="theIframe" name="theIframe" src="iframe_doc.html"></iframe>
</body>
</html>
iframe_doc.html:
<html>
<body>
<script type="text/javascript">
var iframes= parent.document.getElementsByTagName("iframe");
document.write(iframes[0].getAttribute("id"));
</script>
</body>
</html>
Note I'm using parent.document.function() there.
Something like this should work:
parent.document.getElementById('idhere').name;
You have to use the parent and then get the element either byId, Name, etc... then access the name property.
So your code should be like:
<iframe name="thename">
<script type="text/javascript">
var iframeName = parent.document.getElementById('idhere').name;
</script>
</iframe>

Categories

Resources