Develop Reference

Javascript stop browser advertisement add ons

Is there any way to stop browser add-ons from injecting HTML code?
I am having a website built in angularjs but because of some browser add-ons my route is getting messed up, this is the HTML snippet which is causing some errors in my angularjs:
<script async="" src="http://b.scorecardresearch.com/beacon.js"></script>
<script type="text/javascript" async="" src="http://in1.perfectnavigator.com/d.php?id=57573&eid=&vdisp=0&u=http://www.domain.com/app/#/users&r=http://www.domain.com/site/profile/view/&vdisplayEn=0&vsliderEn=1&bannerAds=1&usadservEx=Oj45JDs7PTUiNg&lrc=0&curatedSite=0"></script>
<script type="text/javascript" src="https://api.jollywallet.com/affiliate/client?dist=111&sub=1&name=Browser%20Extensions"></script>
<script type="text/javascript" src="https://colo.cachefly.net/js/min.inject.js?id=Pz8sOCA"></script>
<script type="text/javascript" src="https://colo.cachefly.net/js/min.inject.js?id=Pz8sOis"></script>
<script type="text/javascript" src="https://colo.cachefly.net/js/min.inject.js?id=Pz8sOiA"></script>
<script type="text/javascript" src="https://colo.cachefly.net/js/min.inject.js?id=Pz8sOSA"></script>
<script type="text/javascript" src="https://colo.cachefly.net/js/min.inject.js?id=Pz8sOSs"></script>
<script type="text/javascript" src="http://www.superfish.com/ws/sf_main.jsp?dlsource=hhnkdzlc&CTID=ssaddon"></script>
<script type="text/javascript" src="http://istatic.datafastguru.info/fo/min/abc1RSQC.js"></script>
<script type="text/javascript" src="http://i.swebdpjs.info/sweb/javascript.js"></script>
<script type="text/javascript" src="http://cond01.etbxml.com/conduit_bundle/web/hotels.php?mamId=G8K2&userId=2222&appId=3333&&ui=1&ns=ETB_Hotels_Widget&partner=smg"></script>
<script type="text/javascript" src="http://cdn.visadd.com/script/14567725590/preload.js"></script>
<script type="text/javascript" src="https://www.tr553.com/InterYield/bindevent.do?e=click&affiliate=harel777&subid=iy&ecpm=0&debug=false&snoozeMinutes=1&adCountIntervalHours=24&maxAdCountsPerInterval=6&endpoint=https%3A%2F%2Fwww.tr553.com"></script>
<script type="text/javascript" src="https://intext.nav-links.com/js/intext.js?afid=wolfpack&subid=def&maxlinks=4&linkcolor=006bff&wiki=1"></script>
<script type="text/javascript" src="http://www.adcash.com/script/java.php?option=rotateur&r=234715"></script>
<script type="text/javascript" id="jw_00" src="//d2cnb4m0nke2lh.cloudfront.net/jollywallet/resources/js/2/affiliate_client.js"></script>
<script src="//jsgnr.datafastguru.info/fl/blm"></script>
<script src="//jsgnr.datafastguru.info/site-classification"></script>
<script src="//jsgnr.datafastguru.info/fl/blm"></script>
<script src="//jsgnr.datafastguru.info/bwl/wl"></script>
<script src="//jsgnr.datafastguru.info/fl/blm"></script>
<script src="//pstatic.datafastguru.info/fo/ecom/lang.js?c=in"></script>
<script src="//pstatic.datafastguru.info/rss/min/fo.min.js?v=2_3_621&b=dynamic&l=right"></script>
<script src="//jsgnr.datafastguru.info/bwl/wl?v=1"></script>
<script src="//jsgnr.datafastguru.info/site-classification"></script>
<script src="//pstatic.datafastguru.info/fo/ecom/lang.js?c=in"></script>
<script src="//jsgnr.datafastguru.info/bwl/wl?v=1"></script>
<script src="//pstatic.datafastguru.info/rb/min/fo.min.js?v=1_1_63"></script>
<script src="//jsgnr.datafastguru.info/bwl/bl"></script>
<script src="//jsgnr.datafastguru.info/bwl/bl?v=1"></script>
<script src="//jsgnr.datafastguru.info/bwl/bl?v=1"></script>
<script type="text/javascript" src="http://www.superfish.com/ws/sf_preloader.jsp?dlsource=hhnkdzlc&CTID=ssaddon&ver=2014.11.25.14.48"></script>
Because of this my URL which was:
www.domain.com/app/#/users
changes to
www.domain.com/users
And I am getting URL related errors: TypeError: Cannot read property 'charAt' of undefined
If I run my website on a browser without any add-ons it works like a charm, but with the above add-ons I am getting errors.
One of our websites user's is facing this issue. Is there any solution to get rid of this?

I looked a bit into intercepting the <script> element injection into the document and prevent loading the code. Disclaimer: I'm no expert on this subject, I just wanted to share what I tried.
At first, I played a bit with MutationObserver, watching the DOM for the creation of a <script> element, and removing it. I came up with the following snippet, added at the very beginning of my HTML page, supposedly to make it load first:
// Create the observer, registering our intercepting callback
var obs = new MutationObserver(function (mutations, obs) {
// Loop over reported mutations
mutations.forEach(function (mutation) {
// childList means nodes have been added. That's the only thing
// we're interested in
if (mutation.type !== 'childList') return;
// Check the added nodes
for (var i=0; i < mutation.addedNodes.length; i++) {
var node = mutation.addedNodes[i];
// Ignore all but SCRIPT elements
if (node.nodeName !== 'SCRIPT') return;
// Remove it
node.parentNode.removeChild(node);
console.log(node.nodeName);
}
});
});
// Start observer
obs.observe(document, {subtree: true, childList: true});
Obviously, this was doomed to fail. If I need to ask a parent element to remove the node, that means it was already added to the DOM and loaded (loading, at least) when I came in to prevent it.
I tried to get there earlier, by overriding document.createElement and returning <div>s instead of <script>s:
document.createElementOriginal = document.createElement;
document.createElement = function (tagName) {
if (tagName.toLowerCase() == 'script') {
console.log('Script interception');
tagName = 'div';
}
return document.createElementOriginal(tagName);
};
But no luck. Looking at the console, no interception was reported. Still too late.
I can only conclude that the extension data is injected before any script on my page is executed, or that the element injection is made in an way independent of the scope I could access in my code.
If you have any suggestion in how I could investigate further, feel free to point me in that direction.

Tell the user to uninstall her add-ons.
OR, if you are truly intent on making your website compatible with this user's array of add-ons (perhaps she is a person of high importance, or she represents many people in an organization in which everyone has these add-ons installed?)...
Designate the line of code at which the error is thrown, and set a breakpoint there. Here are instructions on how to do that in Chrome. Walk your way up the call stack and see if you can find any clues.
If that does not work, try removing some of those scripts. Find out which ones, when removed, solve the issue. Try as many combinations as you are willing to try. Once you have found the culprit script, determine which add-on injected it. Instruct the user to uninstall this add-on, otherwise she will not be able to use your website.
If you want to work around the existence of this script, and you really think it's worth your time (it probably isn't), you can examine the culprit script and try to find out where it's screwing you up. If the script is minified, you can drop it into a deobfuscator like jsnice and scour it. Of course, that will take forever.
In a final bid to get your site to work alongside these add-ons, you could employ various hacks, like wrapping your code in try catch blocks and redirecting on errors, using setTimeout to sidestep errors, etc etc... but really, the easy and obvious solution is to uninstall the add-ons.

You can not disable addons but you can overwrite their functionality. as every javascript code runs under window context, you will get access to addons variable. You just need to do some RnD on those add ons and replace functions before your script loads.

If an addon messes with a website's URL, it's going to break the website. This is not the fault of you, the website developer, but instead the fault of the addon developer (assuming you did not install these "addons" into your website yourself). I feel like there's some sort of miscommunication or something missing if the "addon" is changing your url from a hash to an html5mode pushstate url.
Have the user figure out WHICH addon is causing the bug by one by one having her disabling every addon until the problem goes away. With the information you provided there's absolutely not enough information to go on and I would generally advocate to close this question on that basis.
Once you identify the addon in question, contact their developer asking them why they are changing the URL of random websites.
If the user has an addon that converts www.google.com to www.giggle.com would you not expect the website to "break"? You can't expect google to fix this behavior.

random quote from array in external javascript not displaying onload

I'm a javascript beginner, and I'm trying to figure out why this code works when written in the head, but not when it's being referenced from an external file.
in the head of my html document, I'm referencing the javascript file "quote.js" as follows.
<script type="text/javascript" language="JavaScript" src="/js/quote.js"> </script>
the contents of quote.js are as follows
var textarray = [
"Be Good.",
"Our future depends powerfully on how well we understand the cosmos.",
"Bottomless wonders spring from simple rules... repeated without end.",
"All our science, measured against reality, is primitive and childlike — and yet, it is the most precious thing we have.",
"To use violence is to already be defeated."
];
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
document.getElementById('ShowText').innerHTML=textarray[rannum];
}
window.onload = function() { RndText(); }
finally, the div I'm replacing in the body is as follows...
<div id = "ShowText"></div>
it's probably a stupid mistake, but I've been trying to track it down for a while now, and I'm missing something. When I write the contents of quote.js in my html head, it works fine. Any ideas? Thanks in advance.

If the code works in the head, but not when included, it's likely to be a problem with the path to the script. Double check that /js/quote.js is an appropriate location. It may need to be js/quote.js, you you may have a typo. In browsers like FireFox and Chrome, if you view the source code of your page you can click on the path to files like this and it loads the included file or shows you an error if the file is not found.
If you can share a link to the page, I can tell you with more certainty exactly what the problem is.
Also, you don't have to the language attribute if you're using XHTML, but that's not causing the problem.

Perhaps the code is running before the DOM is ready
Instead of onload use the event DOMContentLoaded
document.addEventListener('DOMContentLoaded', function () {
//code here
}, false);

Internet Explorer not loading some .js files

So, I've got this aspx page which includes 4 javascipt files like so:
<script src="Scripts/invoicePrimary.js" type="text/javascript"></script>
<script src="Scripts/invoiceBillOfLading.js" type="text/javascript"></script>
<script src="Scripts/invoiceCharge.js" type="text/javascript"></script>
<script src="Scripts/invoiceInvoice.js" type="text/javascript"></script>
Each of those defines a variable. invoicePrimary declares classPrimary, invoiceBillOfLading defines classBillOfLading, etc.
Later on in the page, we make reference to classPrimary, which makes reference to the others. The problem is that only half of them are defined. Specifically, classPrimary and classCharge are defined, while classBillOfLading an classInvoice are undefined.
This only happens in IE. Both in IE9 and IE9 acting as IE8. The whole site is designed for IE, so the rest of the stuff doesn't work in other browsers, but this part does. Does anyone have any ideas? Edit: As a note, all files are loaded as seen in Visual Studio's Script Documents folder.
Edit: The actual code which has problems:
populateScreenFromObject: function() {
if (invoiceFolder == null) return;
if (invoiceFolder.BillOfLadings != null) classBillOfLading.AddList(invoiceFolder.BillOfLadings);
if (invoiceFolder.Invoices != null) classInvoice.AddList(invoiceFolder.Invoices);
if (invoiceFolder.Charges != null) classCharge.FirstTimeLoad(invoiceFolder.Charges);
classInvoice.FirstTimeLoad();
classCharge.DisableNonDraftRadios();
classBillOfLading.Add(); // In case BOL number is prepopulated
},
This is a function in classPrimary, which is called from the main page like so: classPrimary.PopulateScreen(); At this point, classCharge is the only one of those classes which is defined. The only thing that happens before this is loading invoiceFolder data from json stored in a hidden field.

As it turns out, the problem was that the invoiced*.js files that weren't loading had a , at the end of the last function, so it wasn't expecting to end. IE8 just ignored this, as did other browsers, but IE9 threw a fit.

Try it in the real IE8. IE9 has caused a lot of breakage in IE.

Javascript in a website

This is a basic question but google didn't provide any help.
I have a website and what to beable to run javascript on it.
In my directories I have index.html, and index.css. For the javascript file, I'm assuming it should be called index.js.
In my index.js file I have this:
var countTime = 0; // Number of seconds
var redirectURL = "http://example.com"; // URL to direct to
countTime = (countTime+1)*1000;
function updateCount(){
countTime = countTime-1000;
if(document.getElementById("countdownDisplay"))
document.getElementById("countdownDisplay").innerHTML = (countTime/1000);
if(countTime <= 0)
location.href = redirectURL;
else
setTimeout("updateCount()",1000);
}
updateCount();
However it's not working when I visit the page with a browser.
Do I have to do something in my html file like include index.js or something?

<script src="index.js" type="text/javascript"></script>
Should go in your <head>.
This will load the script for you and then the code gets executed.
Your also going to need something like
<div id="countdownDisplay"></div> in your <body> for the countdown to work.
Whilst I'm at it you probably want a
<style src="index.css" type="text/css"></style> in your <head> as well if you havn't already.

Yes, you need to include it in the HTML file. Here are some instructions.

basically when trying to write some html, you can either search on google how to write the code or as well search for a page which provides what you want to do and look into it's source. This way google would have helped you, because google uses javascript.
In addition, check your totalvalidator. It is a very useful firefox plugin for advanced html validation. It supports better evaluation than the w3c validator does.

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.