Why would Chrome and Firefox handle Javascript links differently? - javascript

I have a web site that works perfectly in FireFox 9.0.1.
In Chrome 16, it fails catastrophically. Too many errors to go through them all.
However, to pick one problem to start with (and hope that it be a clue that will help illuminate the core issues), I have buttons that are driven by Javascript to simply take someone to a new page.
The code for these buttons is as simple as it gets:
var siteURL = "http://mywebsite.com/";
function goHome()
{
window.location = siteURL + "index.html";
}
In FireFox, if I click the button that executes this code, I get taken to index.html. Easy peasy.
In Chrome, if I click this button, I get a 404 error page that says:
The requested URL /undefinedindex.html was not found on this server.
Why are these browsers behaving differently?
How do I get Chrome to play along?
As requested in the comments, I put alert(siteURL); in the function.
Firefox outputs:
http://mywebsite.com/
Chrome outputs
undefined

This works in Chrome 16:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.siteURL = "http://mywebsite.com/";
function goHome() {
console.log('moo?');
window.location.href = window.siteURL + "index.html";
}
</script>
</head>
<body>
go home
</body>
</html>

you should not use window.location. and instead assign the url to window.location.href
Therefore, it should have been
function goHome()
{
window.location.href = siteURL + "index.html";
}
And also...you get that 'undefined' value because you probably didn't assign any value to siteURL, or you forgot to declare it. make sure it really points to your current root url (if you want it to be)

If all browsers behaved exactly identical, I would be out of work.
It's impossible to tell what exactly goes wrong without seeing the complete code.
Judging from the snippet abobe, there must be some other function (in the same scope as goHome) that assigns undefined to siteURL and gets called prior to goHome

Related

afterprint not detected while hidden printing in an iFrame

I've spent nearly 2 days googling and trying lots of example (even here in StackOverflow), and I don't find any way to fire the event "afterprint". It seems dead. I've found some fiddle, where it works, and when I try to reproduce on my system, it doesn't.
I am not sure what I'm doing wrong.
Here is the code I want to use:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PDF Printing</title>
</head>
<body>
<button id="myButton2" onClick="printPage('http://localhost/~user/testPDF.pdf')">Print Me 2</button><br>
<script type="text/javascript">
function closePrint () {
console.log("Ciao");
document.body.removeChild(this.__container__);
}
function printPage (sURL) {
var myButton = document.getElementById("myButton2");
myButton.disabled=true;
var printFrame = document.createElement("iframe");
printFrame.id = "printPDF2";
printFrame.style.display = 'none';
printFrame.src = sURL;
printFrame.onload = function() {
printFrame.contentWindow.addEventListener('afterprint', function(evt) {
console.log("yellow");
document.body.removeChild(iframe)
});
this.contentWindow.__container__ = this;
this.contentWindow.onbeforeunload = closePrint;
this.contentWindow.onafterprint = closePrint;
this.contentWindow.focus(); // Required for IE
this.contentWindow.print();
}
document.body.appendChild(printFrame);
}
</script>
</body>
</html>
I've tried also with the MediaDetect. And it doesn't work... (I used these links for inspiration: https://jsfiddle.net/5qbc1pzj/ and https://jsfiddle.net/anhhnt/nj851e52/) the JS console is empty... I get no "Ciao" or "yellow"...
I'm using a simple Apache server, and using the latest IE Edge (103.0.1264.62).
I am out of idea, could someone give me an idea, where to look at?
Thank you in advance.
Kind regards,
Alessandro
It doesn't work because detecting the print events only work for HTML-documents. The MIME type for PDF windows is application/pdf so it doesn't work. The events that are available on the window are not available to the <embed> like tags, as they are handled by the browser's default application for the type. Although the event occurs here, it is not bubbled back to the window. For more information, you can refer to this answer.
The only solution to this seems to create your own PDF viewer. For example, you can use PDF.js.

Chrome 44 no longer supports the following syntax: window.location.href = "javascript:someFunction()"

With the update of Chrome from 43 to 44, the following syntax no longer works:
window.location.href = "javascript:alert()"
I'm trying to load the contents of a page from local storage. I'm doing this by returning the page contents as the result of a javascript function call. I need to specify a URL as the target for window. Rather than specifying http://...., I used to be able to specify javascript as the scheme in the URL and specify the name of the function to invoke.
Apparently, Google took this feature away in version 44. Has anyone run into this and figured out an alternative?
For others finding this page, it's an official bug now
The syntax is working for page itself, but not working for an iframe. This used to work in versions prior to Chrome 44. Even in Chrome 44, document is built and all events are fired, but the page won't be visible in iframe. The frame will start showing the contents if style attribute position for iframe is removed and added again. Here is the sample code illustrating workaround for Chrome 44.
chrome44.html
<html>
<script>
function getFrame(theFrameID)
{
return document.getElementById(theFrameID);
}
function loadFrameSource()
{
var aFrame = getFrame("frm");
aFrame.src = "chrome44frame.html";
// had to add the following line as a workaround for Chrome 44
aFrame.style.position = "absolute";
}
</script>
<body onload="loadFrameSource()">
<iframe id="frm" style="position : absolute;">
</body>
</html>
chrome44frame.html
<html>
<script>
function getHtml()
{
// Hard coding frame content for illustrating here, but actual script does more
return "<html> <body onload=\"document.getElementById('evnt').innerText='onload event fired.';\">href is Successful in changing html. <div id='evnt'>, but onload event didn't fire.</div></body> </html>";
}
function loadPage()
{
document.location.href="javascript:getHtml('href')";
// Had to add the following line as a workaround for Chrome 44
window.parent.getFrame("frm").style.position = "";
}
loadPage();
</script>
</html>

Using zxing Barcode Scanner within a web page

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.

Move DOM Node to Popup Window

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!

javascript mouse event compatibility issue between browsers

I am new to the web development. I have a code that's supposed to change images when clicked on the image, and change the image back when released. And also it counts how many times it is clicked. I was building and testing this code on Safari and I didn't had any problems. It works just as expected on Safari. However it does not work on Chrome and IE (I haven't tested any other browsers).
I was normally working with HTML5 Boilerplate however I reduced the code so that I can show here (This version doesn't work too).
I have given the code of the page below. What should I do to make it work on every browser. What is the reason that it acts differently on browsers?
Thanks in advance
<!html>
<html>
<head>
<title></title>
<script type="text/javascript">
var count = 0;
function incrementCount()
{
count++;
document.getElementById( "count").innerHTML = count;
}
function pushTheButton()
{
document.images("bigRedButton").src = "img/pressed.gif";
return true;
}
function releaseTheButton()
{
document.images("bigRedButton").src = "img/unpressed.gif";
return true;
}
</script>
</head>
<body>
<div role="main">
<p>
<img src = "img/unpressed.gif" name="bigRedButton" onmousedown="pushTheButton()" onmouseup="releaseTheButton()" onclick="incrementCount()"/>
</br>
Click Count:<p id="count">0</p>
</p>
</div>
</body>
</html>
When testing in Chrome, remember to use its JavaScript console to watch for errors. In this case, it returns the following:
Uncaught TypeError: Property 'images' of object # is not a function
Your problem is on lines 18 and 24, when you attempt to access document.images("bigRedButton") -- document.images is an array (or possibly an object), not a function. It should be:
document.images["bigRedButton"].src
I don't know why it worked on Safari.
http://www.w3schools.com/jsref/coll_doc_images.asp
document.images is documented a integer-indexed array of images.
To be really sure, you should use:
document.images[0].src = ...
Although accessing the image by using the name works in many cases as well.

Categories

Resources