Child of window.open doesn't call function in parent window - javascript

parent.html
<html>
<head>
<script type="text/javascript">
function openWin()
{
myWindow=window.open('child.html','','width=200,height=100');
}
function callback(){
alert("test");
}
</script>
</head>
<body>
<input type="button" value="Open 'myWindow'" onclick="openWin()" />
</body>
</html>
child.html
<html>
<head>
<script type="text/javascript">
window.opener.callback();
</script>
</head>
<body>
</body>
</html>
And the problem is that the child page calls parent's page callback function in FF, IE but not in Chrome.
Any idea ?

Problem happens because of Chrome security error. Domains, protocols and ports must match. But it also happens when page is open from local files system.
Open your page from server, it should be without any problems.

The problem might be the way how chrome run javascript. Chrome sometimes run the js so fast and early and even the DOM is not ready for manipulation. Try this in your child.html
<script type="text/javascript">
setTimeout(function(){window.opener.callback();}, 100);
</script>
I am not sure if this is the exact problem for you, I encountered this problem with jQuery.ready() on chrome.

Related

opener.document.location.href not work in Chrome

Sorry to ask this again.
I am trying to reload the parent window after closing the son window. The code works fine in IE. but not in Chrome (Version 54.0.2840.99 m).
Is it my Chrome setting problem? Or the code problem?
I searched and tried all the solutions but it still not work. Please assist!! Thanks
<!-- Parent Window -->
<head>
<script language="javascript" type="text/javascript">
function popitup2(url) {
newwindow=window.open(url,'email','top=200,left=500,height=500,width=600');
if (window.focus) {newwindow.focus()}
return false;
}
</script>
</head>
<body >
Call S Method 1
<BR><BR>
<a href="#" onClick="window.open('s.htm', '_blank')">Call S method 2/a>
<p id="demo"></p>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
</body>
<!--Son window (s.htm) -->
<head>
<script type="text/javascript">
window.onunload = unloadPage;
function unloadPage()
{
window.opener.location.reload();
}
</script>
</head>
<body>
Son !!
</body>
</html>
It's not the window.opener.location.reload() that doesn't work, but it's calling it from the onunload event. There are very strict rules as to what you are allowed to do in that event handler (to prevent spamming and such)
Check this plunker to see what I mean:
https://plnkr.co/edit/RGIrrupeqxd2bmc9M7ex?p=preview
In the example above you can reload the parent page from the child when clicking the link, but the exact same code doesn't work in the unload event.

Get Back Button to work on parent page when iframe is involved

I am working on a legacy app that has an iframe involved. The back button is working on the iframe and I need it to bypass the iframe and work on the parent window only.
Here is a dumbed down version of the issue and description of what I know.
the main page "index.html" has an iframe that is being added via javascript. It loads a.html, makes an ajax call that then does a window.location = "b.html" At this point if you use the back button it essentiallys makes the iframe go back to a.html and then redirects to b.html so you are effectively stuck on the page. If I remove the ajax call and do an window.location on load everything works ok. However given the architecture and what happen on the page I can't remove the Ajax call from the picture.
Here is the code I am looking at, let me know your thoughts on how to solve this issue. Also I should mention in Chrome 41 this isn't an issue, however the newer chrome 48 and 49 it is an issue. I tried history.replaceState but wasn't able to figure out a way to use it in this situation that made things work.
index.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
hello world!
<div id="iframeContainer"></div>
<script>
$(function () {
var newIframe = document.createElement('iframe');
newIframe.src = "a.html";
newIframe.id = "A";
document.getElementById("iframeContainer").appendChild(newIframe);
});
</script>
</body>
</html>
a.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body style="background-color:#F00;">
<script>
$(function(){
$.ajax({
url:"b.html",
complete:function(){
window.location="b.html";
}
});
});
</script>
</body>
</html>
b.html
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body style="background-color:#00F;">
<script>
$(function(){
})
</script>
</body>
</html>
This is only possible in HTML5 compatible browsers, and it would go something like this..
This goes in the child frame..
// catch the back button click.
window.onpopstate = function(event) {
// make the parent window go back
top.history.back();
};
This also only works if both frames are in teh same domain.

Is it possible to define a function in <body> tag of <html> and call it form the <script> tag

I am new to HTML and Javascript, and I have a strange doubt
Is it possible to define a function in "body" tag of html and call it form the "script" tag
Till now i am trying this...
<!DOCTYPE html>
<html>
<head>
<script>
myFunction()
</script>
</head>
<body>
function myFunction()
{
alert("Hello World!");
}
</body>
</html>
No not possible. Browser only understands javascript within the <script> tag.
It will not work, try this,
<html>
<body>
<script>// don't miss script tags for javscript code
function myFunction()
{
alert("Hello World!");
}
</script>
<script>
myFunction(); // call if you have defined function earlier
</script>
</body>
</html>
IMHO:
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
myFunction();
</script>
</head>
<body>
</body>
</html>
or you can use body Onload.
No U cant do it.....U should put js function within the script tag.....
you can do like this
<!DOCTYPE html>
<html>
<head>
<script>
myFunction();
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
</body>
</html>
<html>
<head>
</head>
<body>
<script>
function myFunction()
{
alert("Hello World!");
}
myFunction()
</script>
</body>
</html>
I agree with Rohan but just to check I removed the 2nd pair of script tags and called the function in the same script block as it was defined and it worked but this is not normally the way things are done and this is not normally the use of an embedded JavaScript (js)
Doing a little extra research to find the best/optimum place for embedded js appears to be at the bottom of a webpage before the /body (closing body) tag
Here's a link to Yahoo's "speed up your website" guide:
Yahoo! Developer Network: Best Practices for Speeding Up Your Web Site
and here's the text from the page that refers to embedded js:
Put Scripts at the Bottom
tag: javascript
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
In some situations it's not easy to move scripts to the bottom. If, for example, the script uses document.write to insert part of the page's content, it can't be moved lower in the page. There might also be scoping issues. In many cases, there are ways to workaround these situations.
An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox doesn't support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.
Also, if you go to the site and click the JavaScript tag you get a whole list of optimisations and tips - refer to the image!

How to close the window with Javascript

Haven't been programming in JS for a while.
Now, I have following thing:
<html>
<head>
<script language="JavaScript">
function enlarge()
{
window.close();
}
</script>
</head>
<body>
<img src="addresstomyimg.png" onClick="enlarge()" />
</body>
</html>
(it's very simplified, as, in fact, I have WordPress platform with custom JS modifications etc, but in general, this is the idea).
I don't understand why it's not working.
JavaScript cant close the window unless it opened the window.
In your function, replace window.close() with alert('here') and you'll see the function works fine.
If you want your function to close a window, first open one:
<html>
<head>
<script type="text/javascript">
var popup;
function closewin()
{
popup.close();
}
function openwin()
{
popup = window.open('http://www.google.com');
}
</script>
</head>
<body>
<img src="addresstomyimg.png" onclick="openwin()" /> Click to open, then come back here
<br><br>
<img src="addresstomyimg.png" onclick="closewin()" /> Click to close
</body>
</html>
Demo: http://jsfiddle.net/AlienWebguy/pbFha/
If you try running this script using Firefox and use the Firefox's Error Console to look for errors, you can see that the following error gets logged when you run this script.
Scripts may not close windows that were not opened by script.
You can launch the Error Console in Firefox by pressing Ctrl + Shift + J.
On Chrome, your script successfully closes the tab in which it is running.
Note that the right way to use the <script> tag while writing JavaScript is as follows:
<script type="text/javascript">
If you're trying to close the main window, it won't work.
You can only close windows that were opened by JavaScript.
This code works on IE.
<html>
<head>
<script language="JavaScript">
function enlarge()
{
self.close();
}
</script>
</head>
<body>
<img src="addresstomyimg.png" onClick="enlarge()" />
</body>
</html>

open page automatically using javascript

Essentially, all I want to do is open an external web page after the current page is loaded via java script.
open my page -> javascript tells browser to open external page -> external page being loaded into the broser
How may I accomplish this?
you may use this
<html>
<head>
<script type="text/javascript">
function load()
{
window.location.href = "http://externalpage.com";
}
</script>
</head>
<body onload="load()">
<h1>Hello World!</h1>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function load()
{
window.location.href = "http://externalpage.com";
}
</script>
</head>
<body onload="load()">
<h1>Hello World!</h1>
</body>
</html>
Hope it should be window.location. Check the code.
Technically you can:
location.href = "http://example.net/";
… but you should perform an HTTP redirect instead as that is more reliable, faster and better food for search engines.
You can also use the "open" method to open the source file or url on a new window.
window.open("anyfile.*");
or
window.open("http://anylocation.com");
Hi please try this code for page loading time we will redirect whatever u configured the urls.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
window.open('https://google.com');
}
</script>
</head>
<body onload="myFunction()">
</body>
</html>
<body>
<script>
document.body.innerHTML += 'Link';
document.getElementById("link").click();
</script>
<body>

Categories

Resources