I have been trying to communicate two iframes from same domain which are loaded in a page from another domain.
The problem is browser creates a custom frameset over the content of iframe.
I cant retrieve the iframe names from within the iframe using parent.iframes[x].name because the script addresses frameset as the parent.
Below is my actual html code -
<html>
<head>
</head>
<body>
<p>iframe1</p>
<script type="text/javascript">
var frames = parent.frames;
for(var i=0; i < frames.length; i++)
{
if(frames[i].name != "undefined")
alert(frames[i].name);
}
</script>
</body>
</html>
Below is what browser generated -
<!--inside iframe-->
<html>
<head></head>
<frameset border="0" rows="100%,*" cols="100%" frameborder="no">
<!--actual document goes inside frame tag-->
<frame name="TopFrame" scrolling="yes" noresize="" src="http://abnormalz.stuffshake.com/fframe.html">
<frame name="BottomFrame" scrolling="no" noresize="">
<noframes></noframes>
</frameset>
</html>
Is there any solution to this problem ?
You can check the test at http://stuffshake.com/parent.html
Just use localStorage or sessionStorage. Since both iframes are from the same domain, they share the same localStorage. LocalStorage sends events if a value was modified.
Supported as of IE8.
Related
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);
On the following site (http://www.homefresh.co.nz/gallery.html) there is a piece of javascript up the top to dynamically change the height of my iFrame
Javascript in header:
<script type="text/javascript" language="javascript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;
//change the height of the iframe
var the_height = parseFloat(the_height) + 15;
document.getElementById('the_iframe').height=the_height;
}
//-->
</script>
and in the page is the iFrame code:
<iframe src="http://www.dpdesignz.co.nz/homefresh/" id="the_iframe" onLoad="calcHeight();" height="1" width="920px" scrolling="auto" frameBorder="0"></iframe>
except for some reason it's not updating
I have the exact same code here and it works (http://www.dpdesignz.co.nz/homefresh/test.htm)
Can anyone see anything stopping it?
The page with script and the iframe page have to be on the same domain. This is required by the same Same origin policy because of security matters.
So if you want to access document that's on www.dpdesignz.co.nz then you have to use host page that is on www.dpdesignz.co.nz domain. That's why one of your scripts works and the other don't.
i want to get alert when a A' tag inside the iframe is clicked , here is my code :
<Html>
<Head>
<Title>change links</Title>
</Head>
<body>
<iframe id="tab" src="http://www.site.com"></iframe>
<script type="text/javascript">
var tags = document.getElementsByTagName("a");
tags.addEventListener("click", alert(""), false);
</script>
</body>
</Html>
*the iframe isn't the same domain as where the script is running
why is't that working?
Becouse this is considered a Cross-Site request or also called XSS attack. It is strictly PROHIBITED to read or modify in any way the content of an iframe on a different domain.
Furthur more frames are deprecated in the new HTML5 standart, so using them is discouraged.
Let's imagine that I have something like this:
<html>
...
<div>
<iframe src="test.html" hash="r4d5f7"></iframe>
<iframe src="test.html" hash="8f7x97"></iframe>
<iframe src="test.html" hash="gg4v5e"></iframe>
<iframe src="test.html" hash="e54f87"></iframe>
</div>
...
</html>
test.html is empty page, custom hash attribute always has a different value, both pages are on the same domain for security reasons, number and order of iframe elements is random.
My question is: Is there a way to get from inner page (test.html) using Javascript to its proper iframe element? Let's say, I'm in the third iframe's page and I need to get to its iframe element and alert() hash value (in this case "gg4v5e").
To be more specific. If you are familiar with Firefox's Firebug, it visualizes this situation like this:
<html>
...
<div>
<iframe src="test.html" hash="r4d5f7">
<html>
...
</html>
</iframe>
<iframe src="test.html" hash="8f7x97">
<html>
...
</html>
</iframe>
<iframe src="test.html" hash="gg4v5e">
<html>
...
</html>
</iframe>
<iframe src="test.html" hash="e54f87">
<html>
...
</html>
</iframe>
</div>
...
</html>
Is it possible to call "something" in order to get parent element (<iframe>) when I'm with my Javascript at <html> element in inner page?
Sure there is.
This code works in FF and IE6, Opera, Chrome (requires a web server and both files coming from same domain protocol and port)
function getHash() {
var ifs = window.top.document.getElementsByTagName("iframe");
for(var i = 0, len = ifs.length; i < len; i++) {
var f = ifs[i];
var fDoc = f.contentDocument || f.contentWindow.document;
if(fDoc === document) {
alert(f.getAttribute("hash"));
}
}
}
Suppose we have frameset of with 2 frames, one frame is kind a tiny horizontal header and second is kind of "content" frame with 3rd-party html page inside. When user clicks on some link inside "content" frame, the whole page (frameset) should be reloaded with this link, the same behavior if "content" frame has "target=_top" attribute. How to do this using JS?
The main problem here is - that I can't edit html of "content" page.
Try setting window.location to the target URL.
Here is my quick solution:
<html>
<head>
<script type="text/javascript">
function load(){
// set target="_top" to reload whole frame
var links = this.content.document.getElementsByTagName("a");
for(var i = 0; i < links.length; i++){
var link = links[i];
link.target="_top";
}
}
</script>
</head>
<frameset rows="50,*" frameborder="0" onload="load()">
<frame src="/header.html" scrolling="no">
<frame src="/content.html" name="content">
</frameset>
</html>