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.
Related
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.
I'm working on a simple chrome extension that displays a string of text when the user opens a new tab. The code is:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="showText.js"></script>
</head>
<body>
<div id="textDiv">
<h1 id="actualText"></h1>
</div>
<div id="footer">
<img src="settings.png"/>
</div>
</body>
</html>
and the js file
document.addEventListener("DOMContentLoaded", function () {
var text = "sample text";
$('#actualText').append(text);
});
This doesn't seem to work when I open a new tab, but when I click refresh on the tab, the text shows up. So I'm guessing the first time the DOMContentLoaded event has already been fired before this code is run? That shouldn't be the case if I load it in the head though right? I'd appreciate any help!
If you are using jquery just do:
$(function () {
var text = "sample text";
$('#actualText').append(text);
});
This will call the function when the document is ready. Apparently this is equivalent to DOMContentLoaded
In my application i have to alert user to signout on browser close.
For that i have used the javascript as below
<body scroll="no" onbeforeunload="browerClose()">
<script language="JavaScript" type="text/javascript">
function browerClose()
{
window.alert("Click OK to SignOut");
window.location.href = "http://localhost:8086/egs/ervlet?pri=logOut";
}
this is Working for IE ,but not works for FireFox,
Wats the Problem....Any Suggesstions
Thankxx in Advance,
I would suggest you move the javascript function to the head section of the HTML document. That way it is working for Firefox. Maybe this is because HTML documents are processed in sequential order and you need to define the function before you can use it.
Do something like this:
<head>
<script language="JavaScript" type="text/javascript">
function browerClose()
{
window.alert("Click OK to SignOut");
window.location.href = "http://google.com";
}
</script>
</head>
<body scroll="no" onbeforeunload="browerClose()">
<!-- you code here -->
onbeforeunload event will not work from fire fox version 26 if u used any custom alert message in your application which means you need to perform x operation when closing browser/tab or refreshing page but you put alert message in function which will be called from onbeforeunload then the x (update) operation will not happened.
<html>
<head>
<script>
function unloadfunction() {
alert('test');
// update employee ID in Database
}
</script>
</head>
<body onbeforeunload="unloadfunction();">
</body>
</html>
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>
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.