// #sourceurl on script tag in firefox - javascript

In firefox 19 and firebug 1.X I encountered a strange bug when trying //#sourceurl.
Basically I'm dynamically adding script tag through dom manipulation as you can see in the sample below. This does not work.
Maybe it's a limitation of ff but I find it odd that it works in chrome and not in ff.
Can you confirm this and do you have any bypass to this bug?
Ps: I don't want to use global eval() as it crash in ie when using document.write
<html>
<head>
<script type="text/javascript">
var count=0;
function addNewScriptToHead()
{
var newScriptElem;
var newScriptText;
newScriptElem = document.createElement('script');
newScriptElem.setAttribute('type', 'text/javascript');
newScriptElem.setAttribute('id', '' + count);
newScriptElem.text= 'console.log("Yay !");//# sourceURL=root/test'+count++ +'.js';
document.body.appendChild(newScriptElem);
};
</script>
</head>
<body>
<button onclick="addNewScriptToHead()">add script</button><br><br>
</body>
</html>

Experimentation has lead me to believe the following:
As of version 20.0, FF still does not support //# sourceURL directly in its inbuilt web console.
//# sourceURL does work with the Firebug addon in FF, but not completely as expected/hoped.
A. It only works for eval. It doesn't work at all for appended
script nodes like in the original question.
B. Errors will have a line number and the URL, and you can click
the error to see the line of code. However, console.log does not
seem to be affected and shows no line number or URL.
Testing this feature from within FF's web console is not advised. I got different results than testing directly in HTML at least some of the time.

Related

Dynamically Inject JavaScript Modules in Edge Browser

I created a little demo here: https://codepen.io/min-width/pen/LYVVLwK
But just in case that gets lost in time, here is the JavaScript from that page (it's constructing a script tag with a type of "module" and injecting it into the page):
let value = `<script type="module">
let element = document.createElement("p");
element.appendChild(document.createTextNode("The JavaScript executed."));
document.querySelector("body").appendChild(element);
</scr` + `ipt>`;
let compiled =
document.createRange().createContextualFragment(value),
body = document.querySelector('body');
body.appendChild(compiled);
When working, it should say "The JavaScript executed" in the body of the page. This works fine in most browsers (and I accept that it doesn't work in IE since IE doesn't support modules at all).
My issue is that this does not work in Edge, even though Edge does have support for JavaScript modules: https://caniuse.com/#feat=es6-module
Edge just doesn't seem to like when modules are injected dynamically. Is there some client-side workaround for this? I currently have it working with a server-side check for "Edge" in the user agent (in which case I render the module immediately in the HTML rather than injecting it with JavaScript), but that doesn't feel like an optimal solution.
In case you are wondering, my use case is that I preload some JavaScript modules, then I inject them into the page when the user first interacts with the page (a page speed optimization that PageSpeed Insights seems to like).
Edit: Since somebody asked, here is the Edge version number info (from the settings):
It shows Edge 44 and EdgeHTML 18.
I tried to modify your code and it works with MS Edge 44 version.
<!DOCTYPE html>
<html>
<head>
<title>Demo page</title>
</head>
<body>
<script>
let se =document.createElement('script');
se.setAttribute('type', 'module');
se.innerHTML='var para = document.createElement("P"); para.appendChild (document.createTextNode("The JavaScript executed.")); document.querySelector("body").appendChild(para);';
let body = document.querySelector('body');
body.append(se);
</script>
</body>
</html>
Output in Edge browser:

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>

Mysterious "Type Error: non-native scope object" in Firebug

Consider the following HTML:
<!DOCTYPE html>
<html>
<body>
Test page
<!--Start of Zopim Live Chat Script-->
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute('charset','utf-8');
$.src='//cdn.zopim.com/?pTR0FiicfJ4aMcmuHI9HfVAB4uzKeFIT';z.t=+new Date;$.
type='text/javascript';e.parentNode.insertBefore($,e)})(document,'script');
</script>
<!--End of Zopim Live Chat Script-->
<script type="text/javascript" async="">
window.addEventListener('load', function() {
var b = document.getElementsByTagName("body")[0];
var o = document.createElement("object");
o.setAttribute("type", "application/x-shockwave-flash");
var t = b.appendChild(o);
});
</script>
</body>
</html>
jsFiddle here: http://jsfiddle.net/V9jtD/
It contains Zopim widget code, another async script that just adds an "object" tag to DOM. Let the above file be served by a webserver (you can use the jsFiddle: http://fiddle.jshell.net/V9jtD/show/). Open it in MacOSX Firefox 15+ with Firebug activated.
You will see the following error repeated many times:
TypeError: non-native scope object
If the errors donot show up, just refresh the page. And mainly Zopim fails to show up (sometimes appears with incomplete functionality). I could not reproduce this in Firefox/Ubuntu. (It might be reproducible in Firefox/Windows I could not check).
However, in the following cases Zopim loads fine:
Comment out "var t = b.appendChild(o);" (ie. dont append the "object" tag to DOM, or you can just remove second script tag entirely).
Deactivate Firebug.
I essentially want to understand who is causing the error so I can debug it.
Is it Firebug, because deactivating it Zopim works fine? But then removing the second script tag with Firebug enabled does not cause the error.
Is it the second script tag, because removing it Zopim works fine? But then deactivate Firebug and Zopim works fine even with second script tag.
Or is it Zopim itself?
Note that the content in the second script tag is part of function testPlayerVersion() in swfobject.js. I have hit this error when I am trying to add Zopim to a page that already has swfobject.
It would probably be easier to work out if the fiddle wasn't loading minified JS from Zopim, but the offending line (roughly beautified) is:
try {
(0)()
} catch (v) {
s = v.arguments ?
'chrome' : v.stack ?
'firefox' : window.opera && !('stacktrace' in v) ?
'opera' : 'other'
}
Which looks like a hacky way of detecting the browser. I'm not sure why it's causing Firebug to bail, it might be worth raising an issue with them if it's reproducible.

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.

Dynamically loaded <script> tag not being used in WebKit browsers

It seems this is a known problem and has been asked several times before here in SO however I do not see anything specific to jQTouch so I thought I would give it a try.
jQT will dynamically load pages when a link is clicked. In this page I would like to include something like
<script>
$.include('javascriptfile.js', function() {alert('do something with results of this file to an already existing div element');};
</script>
The $.include is a jquery plugin I found that mimics the $.load with a few more smarts added to it. Tested to work on FF but not in Chrome or most importantly, Safari.
The alert is never displayed. FireBug never shows the javascript even being loaded. If I put an alert before the $.include I still do not see anything.
I have tried an onclick/ontap event that would then run this code that was included in the head tag, no luck.
Edit: I am using the r148 revision of jQT. This was working prior to moving to this version, i believe.
Did you try to add the javascript file using one of these two methods:
Static Way:
<script type="text/javascript">
function staticLoadScript(url){
document.write('<script src="', url, '" type="text/JavaScript"><\/script>');
}
staticLoadScript("javascriptfile.js");
modifyDivFn(processFnInFile());
</script>
Dynamic way:
<script type="text/javascript">
function dhtmlLoadScript(url){
var e = document.createElement("script");
e.src = url;
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);
}
onload = function(){
dhtmlLoadScript("javascriptfile.js");
modifyDivFn(processFnInFile());
}
</script>
After the include you can call a function that does the processing you want (that being processFnInFile()) which result will be passed to modifyDivFn (and modify the div you want.) You could do this in one function, just to illustrate the idea.
Source: Dynamically Loading Javascript Files
Well Geries, I appreciate your help but ultimately the answer required a drastic rethinking of how I was using JQTouch. The solution was to move everything to an onclick event and make all the hrefs link to #. This might be what you were talking about Geries.
In the onclick function I do the logic, preloading, loading of the page through my own GET through jquery, then use the public object jQT.goTo(div, transition). This seems to get around the WebKit bugs or whatever I was running into and this now owrks on FireFox, Chrome, Safari, iPhone, and the lot.
I do run into a few animation issues with JQT but I think these are known issues that I hope Stark and the gang at JQTouch are working on.

Categories

Resources