I'm trying to launch a popup window from a Javascript function and ensure it has focus using the following call:
window.open(popupUrl, popupName, "...").focus();
It works in every other browser, but IE8 leaves the new window in the background with the flashing orange taskbar notification. Apparently this is a feature of IE8:
http://msdn.microsoft.com/en-us/library/ms536425(VS.85).aspx
It says that I should be able to focus the window by making a focus() call originating from the new page, but that doesn't seem to work either. I've tried inserting window.focus() in script tags in the page and the body's onload but it has no effect. Is there something I'm missing about making a focus() call as the page loads, or another way to launch a popup that IE8 won't hide?
The IE8 is not allowing this feature because of security issues
Windows Internet Explorer 8 and later. The focus method no longer brings child windows (such as those created with the open method) to the foreground. Child windows now request focus from the user, usually by flashing the title bar. To directly bring the window to the foreground, add script to the child window that calls the focus method of its window object
http://msdn.microsoft.com/en-us/library/ms536425%28VS.85%29.aspx
You might try this. Not sure if it will work though>
var isIE = (navigator.appName == "Microsoft Internet Explorer");
var hasFocus = true;
var active_element;
function setFocusEvents() {
active_element = document.activeElement;
if (isIE) {
document.onfocusout = function() { onWindowBlur(); }
document.onfocusin = function() { onWindowFocus(); }
} else {
window.onblur = function() { onWindowBlur(); }
window.onfocus = function() { onWindowFocus(); }
}
}
function onWindowFocus() {
hasFocus = true;
}
function onWindowBlur() {
if (active_element != document.activeElement) {
active_element = document.activeElement;
return;
}
hasFocus = false;
}
Yeah I can't test this on IE8 at the moment either but have a play with this document.ready method instead of the body.onload:
test1.html:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
function openNewWindow()
{
window.open("test2.html", null, "height=200, width=200");
}
</script>
</head>
<body>
<a onclick="openNewWindow()">Open</a>
</body>
</html>
test2.html:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ window.focus(); });
</script>
</head>
<body>
<div id="container" style="background:blue;height:200px;width:300px">
</div>
</body>
</html>
I figured out what the issue was - turns out the reason running window.focus() in the onload wasn't working was because the first window.open().focus() call caused it to start flashing in the background, and after that any subsequent focus calls wouldn't work. If I don't try to focus it from the calling window but only from the popup it comes to the front normally. What an annoying "feature"...
The problem is the Window.focus method does not work in Internet Explorer 8 (IE 8). It's not a pop up blocker or any settings in IE 8 or above; it's due to some security I believe to stop annoying pop-ups being brought back up to the top.
after a lot of hair pulling and googling i found the following:
Microsoft suggest updates but this doesn't appear to work plus how do they seriously expect me to ask all of the users my site to update their machines!
so I've come up with this work around or fix.
What i do with the window is:
first I check if the window is open
if it's open, close it
open a new fresh version of the window on top.
javascript code to include at header or in separate file:
function nameoflink()
{
var nameofwindow = window.open('pagetolinkto.htm','nameofwindow','menubar=1,resizable=1,width=350,height=250');
if (nameofwindow) {
nameofwindow.close();
}
window.open('pagetolinkto.htm','nameofwindow,'menubar=1,resizable=1,width=350,height=250');
return false;
}
link on the page:
Click Here to go to name of link
Tested in MS Windows 7 with IE8 not sure of exact version.
Related
Is there a working example how you can use the zxing Barcode Scanner from a web page?
Referring to this documentation:
https://github.com/zxing/zxing/wiki/Scanning-From-Web-Pages
shouldn't the following test code work?
function Test1()
{
$.ajax(
{
url: "zxing://scan/?ret=http%3A%2F%2Ffoo.com%2Fproducts%2F%7BCODE%7D%2Fdescription&SCAN_FORMATS=UPC_A,EAN_13",
success:function()
{
alert("success");
},
error:function()
{
alert("error");
}
});
}
function Test2()
{
$.ajax(
{
url: "http://zxing.appspot.com/scan?ret=http%3A%2F%2Ffoo.com%2Fproducts%2F%7BCODE%7D%2Fdescription&SCAN_FORMATS=UPC_A,EAN_13",
success:function()
{
alert("success");
},
error:function()
{
alert("error");
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button1" onClick="Test1();">Test 1</button>
<br>
<br>
<button id="button2" onClick="Test2();">Test 2</button>
I keep getting "error" on my Android 4.4.2 Samsung Galaxy TabPro and Samsung Galaxy S4.
I've tried the stock browser, Chrome, Firefox and Dolphin Browser.
Even http://zxing.appspot.com/scan doesn't work as it always asks me to install the (already installed) app.
Any help would be much appreciated.
ZXing isn't designed to work with AJAX. Instead, it works by opening a parsed URL in the default browser. The behavior of the browser is mainly what's responsible for the user experience from that point forward.
There are several methods posted regarding this; unfortunately, there is no one method that will work for every browser.
Some browsers, when you open them from the command line, will check to see if the URL is already opened in another tab, and if so, will use that tab instead of a new one. This will cause a "onhashchange" event if the zxing link contains "zxing://scan/?ret=mytab.html#{CODE}".
Other browsers don't perform such a check, so we wind up with multiple tabs, all having the same URL (with the exception of the hash), and none of them raising the "hashchanged" event. For those browsers, we need to re-use the page from cache if possible (to prevent network traffic on every scan), and change the localStorage value to what the hash is. If the browser is capable of listening for the "storage" event, we can use that to trigger the code.
The code below works with Chrome, the intrinsic Android browser, and Firefox. It might work with others, but I haven't tried. One Firefox caveat, though, is that the scanner window will only close if the about:config setting "dom.allow_scripts_to_close_windows" is set to "true".
** This was edited to work better with multiple pages that allow scans, and now you can use have different hashes without interfering with the code. **
NEW VERSION 12/19/16
<!DOCTYPE html>
<HTML>
<HEAD>
<script type="text/javascript">
if(window.location.hash.substr(1,2) == "zx"){
var bc = window.location.hash.substr(3);
localStorage["barcode"] = decodeURI(window.location.hash.substr(3))
window.close();
self.close();
window.location.href = "about:blank";//In case self.close isn't allowed
}
</script>
<SCRIPT type="text/javascript" >
var changingHash = false;
function onbarcode(event){
switch(event.type){
case "hashchange":{
if(changingHash == true){
return;
}
var hash = window.location.hash;
if(hash.substr(0,3) == "#zx"){
hash = window.location.hash.substr(3);
changingHash = true;
window.location.hash = event.oldURL.split("\#")[1] || ""
changingHash = false;
processBarcode(hash);
}
break;
}
case "storage":{
window.focus();
if(event.key == "barcode"){
window.removeEventListener("storage", onbarcode, false);
processBarcode(event.newValue);
}
break;
}
default:{
console.log(event)
break;
}
}
}
window.addEventListener("hashchange", onbarcode, false);
function getScan(){
var href = window.location.href;
var ptr = href.lastIndexOf("#");
if(ptr>0){
href = href.substr(0,ptr);
}
window.addEventListener("storage", onbarcode, false);
setTimeout('window.removeEventListener("storage", onbarcode, false)', 15000);
localStorage.removeItem("barcode");
//window.open (href + "#zx" + new Date().toString());
if(navigator.userAgent.match(/Firefox/i)){
//Used for Firefox. If Chrome uses this, it raises the "hashchanged" event only.
window.location.href = ("zxing://scan/?ret=" + encodeURIComponent(href + "#zx{CODE}"));
}else{
//Used for Chrome. If Firefox uses this, it leaves the scan window open.
window.open ("zxing://scan/?ret=" + encodeURIComponent(href + "#zx{CODE}"));
}
}
function processBarcode(bc){
document.getElementById("scans").innerHTML += "<div>" + bc + "</div>";
//put your code in place of the line above.
}
</SCRIPT>
<META name="viewport" content="width=device-width, initial-scale=1" />
</HEAD>
<BODY>
<INPUT id=barcode type=text >
<INPUT style="width:100px;height:100px" type=button value="Scan" onclick="getScan();">
<div id="scans"></div>
</BODY>
</HTML>
You can make a JS include file for the top block of script, and include it on all the pages where you need scanning capabilities.
Then in the body of your document, you can set an event somewhere to call getZxing(), which will call processBarcode(barcode) that you write into your page. Included is a simple one for example's sake.
Side Note: The first time you run zxing from your page, you'll be asked to choose a default app. Make sure you chose the same browser that you're running the page from. Additionally, if you previously selected a default broswer for zxing and want to change which browser you use for zxing, you'll need to clear defaults from your other browsers.
Many thanks to #sean-owen for his hard work and fantastic product.
UPDATE 12/19/16
Ok, I did a slightly more robust version that works well with Firefox and Chrome. A couple of things I discovered:
Chrome will use the Storage event if the scanner is not set to open Chrome automatically, and will use the Hash event after it becomes default.
Firefox will never use the Hash event, but opens an extra window unless you call the scanner with window.location.href (Thanks, #Roland)
There are a couple of other anomalies, but no deal breakers.
I left the "zx" prefix in the hash, so that the code could delineate between scanner hashes and regular hashes. If you leave it in there, you'll not notice it in the processBarcode function, and non-zx hashes will operate as expected.
I am trying to move a DOM node from the "root" page to a new pop-up that is created via window.open(). Here is the code I am using.
var win = window.open('/Search/Print', 'printSearchResults'),
table = $('#printTable');
win.document.close();
setTimeout(function () {
var el = win.document.createElement("table");
el.innerHTML = table.html();
win.document.body.appendChild(el);
}, 40);
It works in Chrome, but in IE8, I receive the following error: "Unknown runtime error."
I've also tried it this way:
var p = window.open('/Search/Print', 'printSearchResults'),
table = $('#printTable');
setTimeout(function () {
p.document.body.appendChild(table.clone(false)[0]);
}, 100);
Doing it this way, I receive "No such interface supported" in IE8. Again, Chrome works fine.
Does anyone have a way to do what I'm trying to achieve?
Here is the HTML for the pop-up window just for the sake of completeness:
<!DOCTYPE html>
<html>
<head>
<title>Print Results</title>
</head>
<body>
</body>
</html>
I tested your code on IE9 ( and IE8/7 browser mode).
Instead of el.innerHTML = table.html();
using jquery $(el).html(table.html()); fixed the issue.
To be able to use iframes and new windows, you should initialise them with addres: about:blank, before you write() to them. Also note that loading/opening the window/frame takes time, so you cannot write to them at right away. set a timeout, or check onload.
Please see this answer for more info.
Good luck!
I want to open a window on click, but I want to open it behind the current window, or when the new window opens it should minimize itself. I have made a function but it actually did not work.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function wn(){
var mm=window.open('http://www.google.com','newwindow','width=200, height=200', "_blank");
}
</script>
</head>
<body>
click
</body>
EDIT
Parent window HTML
<script language="JavaScript" type="text/javascript">
function openPopUP() {
window.open('mywindow.html','NewWin',
'toolbar=no,status=no,width=350,height=135')
}
</script>
<body onLoad="openPopUP();">
or
Click to open popup
Child Window i.e PopUp Window File
The below script should be in the child window. The child window will open and will automatically be hidden after 1 second. The value 1000 specified in the setTimeout method is the duration in milliseconds for which the child window will be open. You can increase this timeout duration if you want the child window to be open longer.
<body onLoad="setTimeout('window.blur()', 1000);"
onFocus="setTimeout('window.blur()', 1000);">
This might work for you: Add this line of code in the onload event of your child window...
window.parent.opener.focus();
popunder = window.open('http://www.google.com','newwindow','width=200, height=200', "_blank");
popunder.blur();
window.focus();
Try something like this.
window.open(url);
self.focus();
Although it causes security issues, but I guess one of the way to do it is :
popup = window.open('http://www.google.com', 'newwindow', "_blank");
popup.blur();
This will work only in IE. For other browsers you need to set the security level to minimum.
popunder = window.open('your_site_url','newwindow','width=500, height=500', "_blank");
popunder.blur();
window.focus();
or simply
window.open(url); self.focus();
If you want real popunder capabilities there is a great jQuery plugin to handle it at https://github.com/hpbuniat/jquery-popunder
It uses a combination of various techniques to accomplish it across various browsers. Not all browsers can handle it the same but the results are very similar.
Current browser compatibility is listed as: (last updated April '18)
Mozilla Firefox 3-57
Google Chrome 10-62
Microsoft Internet Explorer 6-11 -- MSIE 6-8 requires jquery 1.x
Apple Safari 5
Finally , it was working for me only in chrome browser. Add this code in Parent window:
<script type="text/javascript" language="javascript">
function popWindow()
{
var popupo = window.open("popup.html", 'newwindow','toolbar=no,status=no,width=650,height=450', "_blank");
popupo.moveTo(0, 0);
popunder.blur();
window.focus();
}
</script>
Add this code in child window body onload event as
<body onLoad="setTimeout('window.blur()', 1000);" onFocus="setTimeout('window.blur()', 1000);">
Insted of a new window, we can create an iframe and open your url in the iframe and then make the iframe display none also print the iframe content if you want.
var ifrmId = 1;
jQuery(document).on('click', '.myFunc', function(e) {
var url = 'www.xyz.com';
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", url);
ifrm.setAttribute("id", ifrmId);
document.body.appendChild(ifrm);
window.frames[ifrmId].focus();
window.frames[ifrmId].contentWindow.print();
document.getElementById(ifrmId).style.display = "none";
ifrmId = ifrmId + 1;
});
I discovered a problem that seems to reproduce always when opening a piece of html and javascript in IE8.
<html>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).resize(function() {
console.log('Handler for .resize() called');
});
});
</script>
<div id="log">
</div>
</body>
</html>
Loading this file in IE8 and opening Developer Tools will show that the log message is printed continuously after one resize of the browser window.
Does anyone has an idea why? This is not happening in IE7 or IE9, nor in other browsers (or at least their latest versions).
UPDATE
One solution to prevent the continuos trigger of resize() is to add handler on document.body.onresize if the browser is IE8.
var ieVersion = getInternetExplorerVersion();
if (ieVersion == 8) {
document.body.onresize = function () {
};
}
else {
$(window).resize(function () {
});
}
But this does not answer my question: is the continuous firing of resize() a bug in IE8?
If "show window contents while dragging" is switched on, you will be inundated with resize events. I guess you're testing IE8 on a separate Windows machine which has this effect enabled (Display Properties -> Appearance -> Effects...).
To counteract this, you can wrap & trap the resize events to tame them: http://paulirish.com/demo/resize
This article says Chrome, Safari & Opera suffer from this too.
I only see the issue you are describing if an element on the page is resized (as described in this question). Your example doesn't work for me, but I assume for you it is appending the console message in the log div that you have there, which means that it is resizing the div and triggering the window resize event.
The answer that Lee gave is correct, but the method in the link didn't work for me. Here's what I did:
var handleResize = function(){
$(window).one("resize", function() {
console.log('Handler for .resize() called');
setTimeout("handleResize()",100);
});
}
handleResize();
This way, the handler is unbound as soon as it fires, and is only re-bound after you've finished all your actions that might re-trigger a page resize. I threw in a setTimeout to provide additional throttling. Increase the value in case your scripts need more time.
Is there a way to capture when a website title changes from a Firefox extension?
I don't know, if it works from a firefox extension, but as it works in a document, I think it works from a extension too.
You have to work with Mutation-Events, especially DOMSubtreeModified. This fires on every change on the target.
A little example-script, put it somewhere after the <title/>
<script type="text/javascript">
<!--
(function()
{
var _this={
target:document.getElementsByTagName('TITLE')[0],
oldValue:document.title
};
_this.onChange=function()
{
if(_this.oldValue!==document.title)
{
_this.oldValue=document.title;
alert('somebody changed the title');
}
};
_this.delay=function()
{
setTimeout(_this.onChange,1);
};
_this.target.addEventListener('DOMSubtreeModified',_this.delay,false)
})()
//-->
</script>
There is a DOMTitleChanged event.