the executing order in chrome - javascript

For the simple html and js code snippet, the action differ from firefox and chrome.
The simple html and js code snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<head>
<title>test welcome</title>
<script>
document.write("welcome1")
alert("welcome2")
</script>
<body>
<h3>welcome3</h3>
</body>
</head>
</body>
</html>
1.Open it with firefox.
To click the ok in alert.
The executing order is : welcome1 ,welcome2,welcome3.
2.Open it with chrome.
To click the ok in alert.
The executing order is : welcome2 ,welcome1,welcome3.
Why chrome parse the simple html and js code that way?
How to make chrome behave such the same way as firefox do?

All browsers will stop execution when an alert is encountered, however, Firefox will not halt rendering for alerts. This is primarily due to the vagueness of the standard, ECMA, who writes the ECMAscript standard (upon which Javascript is built) does not mention window.alert(), as it is specific to Javascript, meaning browsers are free to implement it however they like, and they do.
You can force the popup to occur after page load with something like this <body onload="window.alert('Hello World')">, or using the defer attribute.

Related

JavaScript type="module" not working in iOS

I am having problems with JavaScript code not executing in iOS devices when I use the type="module" attribute.
iOS 14 seems to run it ok, however earlier versions do not.
I created a basic test (see below code) which runs fine on other devices (android mobiles and tablets, desktops) except iOS.
When running the test site on iOS 12 using three different browsers Chrome, Firefox and Safari the script still do not execute. I have even run on multiple iOS 12 devices.
I have discovered when I remove the type="module attribute the JavaScript file executes fine.
I thought perhaps iOS was not compatible with modules however according to caniuse.com JavaScript modules are compatible with iOS 11 and greater.
The code for my test site (not working on iOS) is:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Site</title>
</head>
<body>
<h1>Test Site v16.0</h1>
<p id="text-message">:( the module is not working...</p>
<button id="btn-change">This is a button, can you Click Me</button>
<script type="module" src="script2.js"></script>
</body>
</html>
script2.js
"use strict"
document.getElementById("btn-change").addEventListener("click", (e)=> {
alert("OK, if you can see this message the script is working....");
} );
const message = document.getElementById("text-message");
message.innerText = "If you can see this it means the module is working! ";
I know the problem has something to do with the type="module" attribute, however as I import/export in JavaScript (not shown in the test) I need to include this attribute.
I am relatively new to web design so there may be something vital I have not learnt yet, so any assistance or explanation would be much appreciated.

Why is javascript not executing on a web page when accessed via iOS Twitter browser?

I am completely stumped and I'm sure this was working before.
I have a simple web page with the word "hello" in a div which does two things onload:
1) alert "2"
2) change the text of the div to "bye"
All vanilla Javascript, no libraries.
This works fine on the Chrome, IE, FF, Safari (as you'd expect). If I hit a link in the iOS Twitter app (latest version) to this web page neither of those two things happen. It seems to me that the Javascript is not being executed at all but how can this be? Has anyone else experienced this?
UPDATE
In fact vanilla Javascript will work. The alert test was misleading - I believe thats been disabled which is why it won't work. JQuery will not work however - possibly to do with the $ reference conflicting.
UPDATE 2
The problem has moved on now - my initial assumptions were not entirely correct.
The following code for a web page works:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#test {
color:red;
}
</style>
<script>
window.onload = function () {
document.getElementById('test').innerHTML = 'vanilla javascript worked';
$("#test").text("Jquery worked");
}
</script>
</head>
<body>
<div id="test">
hello
</div>
</body>
</html>
The following code does not work. The path to my script is sound and works on normal browsers, but when in the iOS Twitter in-app browser it seems the local script will not load:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title></title>
<script src="~/Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<style>
#test {
color:red;
}
</style>
<script>
window.onload = function () {
document.getElementById('test').innerHTML = 'vanilla javascript worked';
$("#test").text("Jquery worked");
}
</script>
</head>
<body>
<div id="test">
hello
</div>
</body>
</html>
I have tested the issue on accessing the webpage via Facebook which also works fine either way. The problem is with the Twitter browser only on iOS.
I have tried using an absolute path to my script which also does not work.
UPDATE
This issue is not on iPad. It is iPhone only. As it was working before fine I'd say this is a bug from the latest release of the iPhone Twitter app. Will wait for a fix from Twitter.
Turned out to be that I was re-writing all requests from Twitter to a pre-rendered html instance (brombone). So when it was looking for that file it was actually looking at the brombone server not mine. I took out the rewrite and its fine now.
Completely unrelated to what I was going on about but I solved it nonetheless and may be a reminder to those with similar problems to look outside of the box and check server setups etc...

Chrome extension options not calling javascript file

I have an options page in my Chrome extension which calls a javascript file. I tried using javascript to save my options but it wasn't working, so I tested it with some very simple code:
options.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="options.js"></script>
</body>
</html>
options.js
$(document).ready(function() {
alert('loaded');
console.log('loaded');
});
Neither the alert nor the console.log seems to be firing when I click options in the Chrome extensions page. This makes me think that the options.html file isn't loading the js file, but it could be that I'm wrong to expect alert and console.log to work like this with extension options.
Any ideas what's going wrong here?
To see the results of any console.log you need to right-click on the options modal window and select "Inspect Element". Any console messages will appear here.
However alert commands appear to be suppressed, or at least I was unable to see any.

jQuery.html() breaks onclick handlers in IE11 when <script> tags are included

How can I embed html in IE with both onclick handlers and javascript code contained in a <script> tag.
If I embed some html with an onclick handler using $('#id').html(data), normally this works and the onclick handler fires as expected.
In IE11, however, if I also include a <script> tag in the data being embedded, then the code in the script tag is executed correctly, but the onclick handler no longer fires.
In practice the code I'm embedding is being returned from an ajax call, but here is a simplified example that demonstrates the problem:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
$(document).ready(function() {
var data = '<input type="checkbox" onclick="console.log(\'clicked\'); return false;" />' +
'<scr'+'ipt>console.log(\'loaded\')</sc'+'ript>';
$('#container').html(data);
});
//]]>
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
When the page is loaded, you will see loaded written to the console. But when you click on the checkbox, nothing is logged.
If you remove the script tag from the data, then the onclick handler works fine.
This works with the script tag in Firefox and in Chrome, and seemed to work in IE9 as I recall.
Is this a bug in IE11, a bug in jQuery? Any work arounds?
I am using jQuery v1.11.3
The cause of the problem seems to be "IE Enhanced Security Configuration". From what I can tell this is a setting that is only present in Server versions of MS Windows.
When this setting is on, the above problem persists. Turning off the setting causes the problem to go away.
You cannot turn this off in the IE Options dialog. You must use the "Server Manager" application.

Javascript doesn't execute in Safari when placed in HEAD

I'm having a problem with Javascript not executing when placed in the HEAD section of an HTML page in the Safari browser. It works fine in IE, Chrome and Firefox, but with Safari I have to move it down to between the and tags.
Anyone know if this is a known issue?
PS. The HTML and Javascript is contained in .PHP files, if that makes a difference.
Update:
Code I'm using to test:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
alert("In HEAD Tag");
</script>
</head>
<body>
<div id="innerthumbcontainer">
Test
</div>
</body>
</html>
If I open the page containing this directly it seems to work. But as soon as I load this into a DIV from another page it does not fire in Safari. In all the other browsers it does work though.
I think I would have heard about it if that was a general problem, you probably have a syntax error in your HTML or something, which for some reason makes Safari give up. Post your code, preferably the HTML output, and we'll have a chance of telling you what is wrong.
Edit: As far as I understand you are trying to use a complete HTML page as content for a div, you really can't do that. Depending on what exactly you are trying to achieve you could either use an iframe, or you could cut out the html, header and body tags.

Categories