Change iframe's window's parent
Is it possible to change the contentWindow.parent of an iframe. What I want to do is:
window.document.getElementById('myframe').contentWindow.parent = window.document.getElementById('myframe').contentWindow.window
The above works in Firefox, Chrome, Opera but not IE.
The reason for doing this my iframe (let's call it TOP) itself has iframes in it (let's call them SUBWINDOWS), and both of them have Javascript that calls "parent.document.getElementById" and such. When you are in a top level window then parent.document.getElementId is the same as document.getElementById because for a top level window parent == window. For the iframe SUBWINDOWS parent.document refers to the the document of the top level window. Seems a bit sloppy, but it works, relying on the fact that parent == window for a top level window.
But now that top level window TOP is now an iframe in a bigger page (let's call it BIG). The Javascript in TOP that does parent.document.getElementById is now referring to BIG's document, whereas before it was referring to TOP's document.
So one quick and easy fix is to change the iframe's parent to point to itself. And this indeed works for Firefox, Chrome, Opera.
Any ideas for how to get it to work for IE?
--
My test code is:
test.html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<p>Text outside iframe</p>
<iframe id="myframe" src="test_more.html"></iframe>
</body>
</html>
test_more.html:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<p>Text inside iframe</p>
<input type="button" value="window/parent" onclick="alert('window.location.href = ' + window.location.href + '\nparent.location.href = ' + parent.location.href);"/>
</body>
</html>
Put these files on a web server to avoid the same origin policy error and go to the URL like localhost:6144/test/test.html.
Related
Recently I have been asked for help with a set of HTML pages, that failed to work as expected. The setup consisted of a frameset, where links shown in some frame should open in some other frame. This should be accomplished by the target attribute on the anchor element, or a base element with a target attribute in the page containing the link.
The problem was that links did not open in the desired target frame, but in a different tab.
After some analysis, I found out that this behavior was caused by the presence of a Javascript variable "name", which was present on the page that was initially loaded in the target frame. If the value of that variable did not match the name of the target frame, the link opened on a new tab. In case it matched the target frame name, the link opened in the target frame, as expected.
This happens consistently in recent versions of at least three browsers (tried Firefox, Chrome, and Edge).
I would like to know why it works this way.
Here is a small reproduction of the issue (also available here), with a frameset, three frames with initial content, and two links. The first link, with target="two", opens in frame "two". But the second link, with target="three", does not open in frame "three", instead it opens in a new tab. Apparently this depends on the value of Javascript variable "name" in the initial content of that frame, three.html. But why?
index.html:
<html>
<frameset rows="33%,33%,*">
<frame name="one" src="one.html">
<frame name="two" src="two.html">
<frame name="three" src="three.html">
</frameset>
</html>
one.html:
<html>
<body>
frame "one"
<br>
<a target="two" href="content.html">show content (target="two")</a>
<br>
<a target="three" href="content.html">show content (target="three")</a>
</body>
</html>
two.html:
<html>
<body>
frame "two"
<script>
<!--
var name = "two";
//-->
</script>
</body>
</html>
three.html:
<html>
<body>
frame "three"
<script>
<!--
var name = "two";
//-->
</script>
</body>
</html>
content.html:
<html>
<body>
content
</body>
</html>
The reason for this is that by setting the variable name in the pages, you are overriding the Window.name variable.
And that Window.name variable is what the system uses to determine the Frame's name. When you override this value and change it, and then try to reach the frame with the older value, then you are redirected to a new tab.
HTML file when targeted with link name specified in the frame tag does not open in that named frame. The problem is the frame where it is loaded is calling the other frame to load a new html file does not recognise the name or it can't find where the named frame as specified in the frameset orderly as per syntax. There is no mistake in naming the calling frame. The link opens in itself in its own frame where the html document is calling. It means it opens in the same window frame as _SELF is being executed. The calling frame with its HTML file and primararily the code the anchor tag can't see the window frame I am calling to load the desired HTML file and can't recognise the name I have given to the calling frame.
How to solve.....the first para problem. ?
I reiterate there is nothing wrong in the browser. I have the best app browser line-ups. All execute work fine with all web pages.
Ross
I know IE9 is kind of old now, but it is the lowest version of IE that I still must support in a Web application I'm building.
Anyway, while doing some DOM manipulation and testing in different browsers, I noticed that IE9 was doing something very strange. I had a <script> block in a DIV element, and when I deep-cloned that DIV element using Node.cloneNode(true), and attached the clone to the document somewhere using document.body.appendChild or document.body.insertBefore, the cloned <script> block would get executed again! No other browser exhibits this behavior.
If I'm not mistaken, <script> blocks aren't supposed to be executed when appended to the document after the document has initially loaded, am I right? If I'm correct, is this a bug in IE9?
Here is a simple HTML document where you can see this behavior in action. Create an HTML document with this code and load it up in Internet Explorer using IE9 emulation. You should see an alert popup that says "hey". Next, click the "Click Me" button, and you will see the same popup get executed again!
<!DOCTYPE html>
<html>
<head>
<title>IE9 Script Tag Bug Test</title>
<script>
function ButtonClick(){
var Elem = document.getElementById('mydiv');
var ElemClone = Elem.cloneNode(true);
document.body.insertBefore(ElemClone,Elem);
}
</script>
</head>
<body>
<div id="mydiv">
This is a DIV.
<script>
alert("hey");
</script>
</div>
<button onclick="ButtonClick();">Click Me</button>
</body>
</html>
I am trying to open a separate window (as an underlying window) of the current window. I have attached a simple code segment which I used. But in Chrome there is a popup blocked message appeared when I do this. It means that The separate window is not recognized as a window, it still considered as a popup. How can I do this ? Any suggestions would be really appreciated
<html>
<head>
<title>JS Window example</title>
</head>
<script type="text/javascript">
function windowonload()
{
window.open("http://yahoo.com", "sameera", "height=200,width=200");
}
</script>
<body onload="javascript: windowonload()">
<h1>JS Window example</h1>
</body>
</html>
you can use iframe tag like this wherever you want to show the window
<iframe src="http://yahoo.com"></iframe>
I have a frameset with to frames left/right. The content of the frame left the one below. As you can see, I want to update the hash/fragment identifier of the left frame's parent (the uppermost window) location.
However, this leads to reloading the whole frameset in Safari/Chrome. In Firefox, the whole frameset is not reloaded, but the browsers displays "loading" continuously.
Background: The left frame shows a navigation. A click in an entry loads another HTML page in the right frame and should also update the hash in the location of the browser window so the user can bookmark pages.
How can I make this work?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Left</title>
</head>
<body>
<script type="text/javascript" charset="utf-8">
function go()
{
window.document.write('foo'); // replace document with 'foo'
window.parent.location.hash = '#foo';
}
</script>
<h1>Left</h1>
<p>
Go
</p>
</body>
</html>
You might want to try changing:
onclick="javascript:go(); return false;"
...to something like:
onclick="void(javascript:go(););"
Instead of using window.parent.location.hash just try something like this:
JS:
function go()
{
window.document.write('foo'); // replace document with 'foo'
}
HTML:
Go
I'm not sure if this is even possible.
I've got the following code;
<iframe src="http://www.domain.com/content.html" width="200" height="50"></iframe>
Now, I would have assumed that would've hyper-linked the entire iFrame area, however it only hyperlinks the border.
Is it possible to hyperlink the entire iframe area?
no, that's not valid. you can't even reliably get a click event off of the element containing the iframe.
e.g.,
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bob').click(function(e){
alert('hi');
});
});
</script>
</head>
<body>
<div id="bob" style="padding:100px;background:red;"><iframe src="http://www.google.com"></iframe></div>
</body>
</html>
notice that if you click the iframe, no alert fires - but if you click anywhere else (in red), it will. if this were otherwise, there'd be abuse...
What actually do you mean by "hyperlink the iframe"?
You could try to use an onclick event for the iframe, or position a div with an onclick and transparent background above the iframe. Another possibility is to set the a to display: block and position it above the iframe.