why can't I get the content of another window? - javascript

I am a javascript beginner . I wrote a javascript code to open a website in new window and then get the content of that new window and display it in the first window .. and this is the code :
<!DOCTYPE html>
<html><head></head><body>
<div id="display"></div>
<script type="text/javascript">
var newwin=window.open("http://www.w3schools.com");
newwin.onload=function ()
{display.innerHTML = newwin.document.documentElement.innerHTML;};
</script>
</body></html>
It didn't work .. the web site opened in the new window but the content didn't appear in the first window .. why?
thanks in advance.

Use _parent as a second parameter to position your webpage. (BTW I am assuming you are allowing popups in your browser settings)
var newwin=window.open("http://www.w3schools.com", "_parent");

You cannot do this if the child window is from a different domain. Each domain is sandboxed from the others for security reasons.

There are 2 errors that prevent you:
Different domains
Even if same domain, you set onload function after calling window.open(). So the new "onload" behavior never runs
Solution for same domain:
<!DOCTYPE html>
<html><head></head><body>
<div id="display"></div>
<script type="text/javascript">
var w=window.open("another.html");
var tid = setInterval function () {
if (w.document.readyState !== 'complete')
return;
clearInterval(tid);
display.innerHTML = w.document.documentElement.innerHTML);
}, 100);
</script>
</body></html>

Related

how to set document title of new open window?

I am doing as below code to set document title for new open window
var downloadWindow = window.open("https://www.google.com/", "_blank");
downloadWindow.document.title = "my title";
If we try to execute above snippet in console in google chrome, we can see while loading, We can see "my title", but same behaviour I want to be in internet explore?
How we can achieve same behaviour in internet explore?
Try this
var downloadWindow = window.open("https://www.google.com/", "_blank");
downloadWindow.document.write('<title>my title</title>');
I think that due to security reasons, you will not able to see the modified title on the newly open window.
As a workaround, I suggest you try to display the alert message that informs the user that he is opening the downloading window.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script>
alert("You are moving to download window...");
var downloadWindow = window.open("https://example.com", "_blank");
</script>
</head>
<body>
Test page
</body>
</html>
Let us know if you have any further questions. We will try to provide suggestions for it.

window.open Named Window is opening new window on each click

On launching a window using window.open(), a new instance of browser is getting launched on button click every time, even if the calling function is having named window.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function OpenNamedWindow() {
var w2 = window.open("http://stackoverflow.com", "myWindow", "width=500px;height=500px");
}
</script>
<input type="button" onclick="OpenNamedWindow();" value="Launch App" />
</body>
</html>
After launching the page when I try to access window.name, it shows empty.
I did some search and looks like cross domain is causing the issue.
How can I load the page in same instance instead of launching a new browser window all the time?
This is a trick
function openInNewTab(url) {
var win = window.open(url, '_blank');
win.focus();
}
But even this, perhaps should not work in all browser depending on users configuration
This topic is still here in stackoverflow.
try to check it by yourself at the following link
Open a URL in a new tab (and not a new window) using JavaScript
It opens only one window at a time:
var window_name = null; // global
...
function open_new_window() {
if (window_name && !window_name.closed) {
window_name.close();
window_name = window.open(....);
}

Javascript redirect - New Window

I'm trying to create a re-direct using Javascript from inside a blank iframe that will direct to a URL inside a new window or tab.
More specifically, I'm trying to make a Facebook tab point to my company's webpage rather than load the page inside the tab's iframe which is not the same width as our web page.
Here is the redirect script I already have but it doesn't open the URL in a new window.
<script language="JavaScript">
<!--Redirect to 75th page
var time = null
function move() {
window.location = 'http://philmontscoutranch.org/Camping/75.aspx'
}
timer=setTimeout('move()',0000)
//-->
</script>
Ok - This snippet will open a new window when the page loads but Chrome's pop-up blocker blocked it. I didn't think about this until now. Maybe I could have it load in a light window?
<script language="JavaScript">
<!--Redirect to 75th page
var time = null
function open_win()
{
window.open("http://philmontscoutranch.org/Camping/75.aspx", "_blank");
}
timer=setTimeout('open_win()',0000)
//-->
</script>
Here you go: Jsfiddle Example
function opennewtab(url){
var win = window.open(url, '_blank');
}
<html>
<head>
<script>
function open_win()
{
window.open("http://philmontscoutranch.org/Camping/75.aspx", "_blank");
}
</script>
</head>
<body>
<input type="button" value="Open Window" onclick="open_win()">
</body>
</html>
Source

Access a variable of iframe from parent

script of iframe
<script type="text/javascript" >
var a=5;
</script>
script of parent window
<script type="text/javascript" >
function close()
{
var check=document.getElementById("iframeid").contentDocument.a;
alert(check)
}
</script>
I want to access the variable which is defined inside the iframe from parent. But the above code doesn't work properly can anyone give an idea to implement this.
Using contentWindow instead of contentDocument works for me:
var check = document.getElementById("iframeid").contentWindow.a;
Also, ensure that the domains match and that you are using a webserver to test (I got a protocol warning when testing from the file system).
UPDATE: You're almost definitely better to use the postMessage API.
One method that has always worked reliably for me is for the iFrame to give its parent a reference to its own window when it first loads. The parent can then access all the variables through that reference. This does require that the parent is loaded before the iFrame, but for me that is usually the case.
So in the parent
var iFrameWin;
Then in the iFrame at some point after it has loaded and settled down
parent.iFrameWin = window; //parent now has a ref to the iframe's window
Then, in the parent when it wants a global var contents from the iFrame
alert(iFrameWin.ivar); // shows value if the global 'ivar' in the iFrame
script of iframe:
var a = 5;
window.parent.postMessage(['varA', a], '*'); // put this in some sort of function, ready, or whatever - you can call it multiple times if you need to as the code in the parent is an eventListener
script of parent window:
var b;
// you might want to write these into if statements to make sure that e.data[0] is varA if you have multiple messages coming across
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', function(e) {
b = e.data[1];
}, false);
} else if (typeof window.attachEvent != 'undefined') { // this part is for IE8
window.attachEvent('onmessage', function(e) {
b = e.data; // you'll probably have to play around with this part as I can't remember exactly how it comes across in IE8 -- i think it will involve slice() iirc
});
}
Most of my knowledge on this topic comes from Ben Vinegar's talk on Seamless iFrames
This is a cross-domain "okay" method to deal wit this stuff. I'm sure there are some security holes, just as with anything on the web.
See if this works for you:
i created this parent.html page and put an iframe in it with a text input which will show the value passed from iframe window:
<html>
<head>
<title>IFrame Example</title>
<script language="javascript">
function hello(string){
var name=string
document.getElementById('myAnchor').value=name;
}
</script>
</head>
<body>
<iframe namne="iframe" id="iframe_id" src="inputForm.html" height="150" >
</iframe>
Name: <input type="text" id="myAnchor" >
</body>
</html>
and this iframe content page:
<html>
<head>
<title>IFrame Child Example</title>
</head>
<body>
<form name="frm2" >
<h1><font color="#000099">Input Form</font></h1>
<p>Name : </p><input type="text" name="resp" id="input" value=""/>
<input type="button" onclick="parent.hello(this.form.resp.value);" value="Submit" />
</form>
</body>
</html>
clicking the button i get the value in my parent window.
Play with it if you get something with this one.
document.getElementById('ID_OF_IFRAME').document.getElementById('f1')
Note that cross-domain restrictions will still apply.
This is how SharePoint do it when passing argument values from the parent window to the iframe. It's simple, but it works.
<html>
<body>
<iframe id="iframe1"></iframe>
<script type="text/javascript">
var ifr = window.document.getElementById("iframe1");
ifr.dialogArgs = "Hello from the other side.";
ifr.src = "iframeContent.html"
</script>
</body>
</html>
Inside iframeContent.html:
<html>
<body>
<input type="button" value="Click Me!" onclick="alert(window.frameElement.dialogArgs);" />
</body>
</html>
The other way around (accessing ifr.dialogArgs from the parent window after having its value modified by the iframe document) also works.

As a page, can I tell if I've been loaded into an iframe using javascript?

I'm loading a page into an iframe. Both pages are on the same domain. I want the page being loaded to do specific js functionality only if it has been loaded into an iframe. Is this possible?
Bonus: can it be done in jQuery?
Thanks
or just:
var isEmbed = window != window.parent;
Probably the simplest method:
if ( self !== top ) {
// you're in an iframe
}
So, you check if the current window is the topmost window...
You could use iframe's onload event:
<html>
<head>
<script type="text/javascript">
function load()
{
alert("Iframe is loaded");
}
</script>
</head>
<iframe onload="load()" src="/page.html">
</iframe>
</html>

Categories