Load javascript only when needed (on click) - javascript

I am using the addthis widget on my site:
<!-- AddThis Button BEGIN -->
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&username=abcdefg" rel="nofollow">
<img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="188" height="24" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<!-- AddThis Button END -->
Now, the javascript addthis_widget.js, is useful only when someone actually uses the share button. How do I ensure that it doesn't load everytime, but only when someone clicks on the share button?
I am a noob in javascript, so some sample code will be much appreciated :)
ADDED:
I wish to avoid using jquery or other libraries, because as you can imagine, I am trying to reduce the load time / number of requests / data on my pages.
thanks

The simple answer is don't bother.
What you're asking for is possible, and there are a bunch of script loader tools out there, but that's not the point. The script there sets up the button so that it is clickable in the first place.
If you really wanted to only load the script if someone clicks on the button, then you'd have to:
Add your own code first to detect a click, and stop the browser from redirecting to the default href
Then load the script, which will cause a noticeable delay for the user
Then invoke the correct behaviour on that script. I presume the script is external, and therefore probably isn't designed to work that way without some modification.
Sorry if this isn't the answer you're looking for, but unless that script is actually causing some delays, then really, don't bother :).
(You can, however, add that script to the end of your own JS file and load a single script at the end of your <body>).

A simple solution would be to generate the script tag when the use clicks the link and place in on the site. Can you use external libraries or frameworks such as jQuery to help you out?

Related

How to cancel a JavaScript from your site with another one?

I am making a site at 000webhost.com, but the problem is that they add a script at the bottom of every page to show ads, and even if I deleted it manually, it comes back.
It is placed at the very bottom of the page, even under the </html> tag ( is not included).
Is there a way to cancel it's function with another JavaScript or something? Here is the code that is placed:
<!-- Hosting24 Analytics Code -->
<script type="text/javascript" src="http://stats.hosting24.com/count.php"></script>
<!-- End Of Analytics Code -->
Though you should not remove the adds(as its against the policy and probably will take down your site),
you can do a simple trick if you want to hide the adds, Trick is based on anchors, which are used as adds by 000.webhost
change all your anchor tags to add a class: for example
<a class='myAnchor' />
this class will not be applied to any add than 000.webhost provides.
add a css to your page
a:not(.myAnchor){
display:none;
}
You can set timer to constantly check for injected scripts and remove them, or you can hide ads with CSS rules or you can just leave it there and don't break their policy. There are plenty of hostings without any ads.
you are on free hosting server and they are injecting adds script into your page please provide injected code here, i mean whatever html code injected by this script.other wise you need full access to server to know which service or things inject script into your page and stop them....

How to reload part of a web page using iframe instead of ajax?

The reason I don't want to use ajax to do this is because the part I want to refresh is actually a commenting plugin implemented by other. I just put a snippet of script they provided in my html code and it shows a commenting part under my articles. As it's not a live commenting one, I want to add a refresh button next to it to enable users to just refresh the commenting part to get the latest comments without need for reloading the whole page.
Therefore, I think maybe iframe is an option for me. But the problem is I need to specify the src attribute of iframe. I don't know what value I should use because all I have is just a snippet of script. Can someone give me any idea on this?
By the way, the code snippet is as follows:
<div id="uyan_frame"></div>
<script type="text/javascript" id="UYScript" src="http://v1.uyan.cc/js/iframe.js?UYUserId=1674366" async=""></script>
Just create a html page with the script you talked inside about and use this file in the iframe src attribute.
You can put the snippet above in an html file like this
<!DOCTYPE html>
<html>
<body>
<div id="uyan_frame"></div>
<script type="text/javascript" id="UYScript" src="http://v1.uyan.cc/js/iframe.js?UYUserId=1674366" async=""></script>
</body>
</html>
And then use that file as the src of your iFrame, which you can refresh using javascript.
That said, just because you can do something doesn't mean you should do something. This is a really hacky way of doing what you're trying to do. A few alternative options:
Understand what the script you're using is doing, and work with it. Judging by the name of the script and div in the snippet, it may be creating an iframe to begin with. If thats the case, why not just figure out what that iFrame is called using your browsers debug it and refresh it manually, or modify the script to do so?
Use a live updating framework- This may not be possible for you, I don't know your constraints, but there are plenty of great commenting frameworks out there that do live updates. For instance Disqus comes to mind. Other examples are facebook comments or you could embed a reference to an external site like branch
Use Ajax - I'm a bit unclear on whether this is your script that you're writing, or a 3rd party script. If it is your script, then use the generally accepted methods for doing this type of work, unless you have a really great reason not too. You'll get better support from others, you'll gain more generally applicable experience, and for the most part, best practices gain that name for a reason. People use "ajax" methods for live updating pages because its effective and useful. Frames have become much less common on the web because they're clunky and make it difficult for different parts of the page to interact. If you don't have a great reason not to use the common practice, its usually your best bet.
You could do this :
var iframe = document.getElementById('your_frame_id');
iframe.src = iframe.src;
set the iframe src to its value again, this will cause the frame to refresh, and will work with cross domain frames

Override fancybox from remote-file?

Well, I am using an popup frame and I would like to change some functions of it. But the file is remote file and I am not quite sure how to override javascript functions?
Basically I wanna override this part:
<div id="fancybox-overlay"></div>
Because I want to disable
hideOnOverlayClick
so instead of true, I want that function on false.
Also, is there any chance when that popup comes up, to run custom javascript timer that will force script close after 30 seconds or so?
Thanks in advance. I hope its possible in both cases.
Update:
<script type="text/javascript" src="http://fileice.net/gateway/mygate.php?id=4465766c4278366467523838"></script>
That is the gateway that includes fancybox and jquery. It runs on click of a button, so I hope by including that script you can get informations you need?
Update #2:
http://jsfiddle.net/pVp5h/
You could just download the javascript file you are using, make the changes you want, and host and reference it again yourself.
edit:
just noticed your link, and the file is copyrighted and minified. This means my previous answer is not a good idea... Are you even supposed to use this file?

Refrashing the Javascript File without page refresh.

I am working on a very complex web site which is wizard based and have many JavaScript files included.
Now problem is if I pass through many step and at some later stage I find a JavaScript problem, as I fix it I have to load the page again and as I load the page again the Wizard will be started from step one again.
What I want is if I make JavaScript change in a file, there should be a possibility to refresh the JavaScript file through Firebug or something like it.
Thanks a lot.
No, not really. You could try to change the <script>'s src attribute to something like /your/script.js?timestamp=1234567890, but this doesn't give a reliable guarantee that the script will be loaded again.
You could add another script element into the DOM, but then you'd have two very similar scripts loaded at the same time, which may be problematic.

Remove scripts at bottom of page added by Yahoo?

I'm using Yahoo Small Business to host my website. I use an FTP client (FileZila) to upload my files. However at the end of every page is these few lines:
</html>
<!-- text below generated by server. PLEASE REMOVE -->
<!-- Counter/Statistics data collection code -->
<script language="JavaScript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/smb/js/hosting/cp/js_source/whv2_001.js"></script>
<script language="javascript">geovisit();</script>
<noscript>
<img src="http://visit.webhosting.yahoo.com/visit.gif?us1264993801" alt="setstats" border="0" width="1" height="1">
</noscript>
Everytime I remove it, it comes back. The comment says to remove it. Why the heck can't I remove this. As a side not this is the only thing keeping my site from validating as valid HTML 5.
My guess is, it is generated by Yahoo's SB engine for tracking purposes. If you were to download the file and edit, the comment stated that you remove those lines so that Yahoo engine will add it again upon upload.
PS: I really don't think Yahoo Small Business cares about HTML5 validation.
I was just fixing a Yahoo SE site for a friend and that script is a Yahoo tracker. To remove it, go into the "web hosting control panel", "site statistics", then click the options button in the top right. Remove the "statistics" option and you're good to go.
It's now Validating HTML5 - Hope this helps
That same code was causing upward of 75-second delays on all my pages starting two days ago -- it calls for a one-pixel image located at https://visit.webhosting.yahoo.com/visit.gif
(you can see the image tag in skaffman's question above -- next-to-last line) but that particular link has been broken for the past three days. The result is that every page that has an onload script will hang before it can run the script, as the Yahoo code preempts the page's onload scripts.
My solution was to call Yahoo customer service and have them disable the site statistics (which now also means that I can no longer track usage of my site via their hosting interface).
Yahoo no longer give you the option to be rid of that code snippet. We're stuck with it until they are no longer our ISP. That will be soon.

Categories

Resources