Is there a Firefox extension capable of blocking a single function from embedded javascript in a page?
<html>
<head>
<script type='text/javascript'>
function onLoad(){
setTimeout(annoying, 1800000);
}
function annoying(){
//do something annoying
}
function useful(){
//do something useful
}
</script>
</HEAD>
<BODY onload="onLoad()">
<!--rest of page goes here-->
</BODY>
</HTML>
Perhaps Greasemonkey is the way to go.
The answer below is quite detailed technical, sorry if I went too far ;)
It depends a bit on how the function annoying() is used by the scripts. I am not yet an expert in JavaScript, some more experienced person's voice could be useful.
If annoying() is used by functions like window.setInterval(), window.setTimeout(), you probably can't overwrite the function directly, because of JavaScript quirks with scoping (closures). When the code window.setTimeout(annoying, 600) is executed, a reference to the "old" annoying is stored and that "old" version is executed. You might then try to get rid of the code that is invoking window.setTimeout on annoying instead.
In other cases, you can add a function with the same name and de facto overwrite the function with the following Greasemonkey userscript:
function addScript(sourceCode)
{
var script = document.createElement('script');
script.innerHTML = sourceCode;
var head = document.getElementsByTagName("head")[0];
head.insertBefore(script, head.firstChild); // insert the script as a first child of <HEAD>
}
addScript('function annoying(){alert("overwritten")}');
If you have code like below (I am unable to provide live demo, because it works differently on JSFiddle perhaps because its sandboxing), and the userscript above is launched for that domain, then after 600 milliseconds after page loads, you will have "Nasty alert" alert, but then any time you click the text, you will have "overwritten" alert.
<html>
<head>
<script type='text/javascript'>
function annoying(){
alert("Nasty alert");
}
function useful(){
//do something useful
}
window.setTimeout(annoying, 600); // closure; binds to the function as it is at the moment of execution
</script>
</head>
<body>
<a onclick="annoying()">Click me</a>
</body>
</html>
I know how to block it per page... I have a script here that is bugging me:
<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
// -->
</script>
</head>
<body onload="JavaScript:timedRefresh(300000);">
What these idiots refuse to consider is that if I'm looking around for solutions, I could wind up with 10+ of these page open and 90% of my CPU time is then dedicated to refreshing their pages in the background! grr
I have firebug handy for web development and I just enter this JS command into the console
timedRefresh = function(value){alert(value);}
smile, click ok, and go on my way.
I've posted a solution here: https://stackoverflow.com/a/9699686/6355
Since it's little more than a link here it goes again: http://userscripts.org/scripts/show/125936
This does not help but instead exacerbates the problem.
The following are particularly pernicious and ugly if javascript is enabled:
<script>
setInterval("alert('irritate')",10)
</script>
or
<script>
(function(){(function r(){alert('irritate');setTimeout(r,10)})()})()
</script>
though this can be stopped (and all future TimeOuts) by:
javascript:setTimeout=function(){}
perhaps as the URI of a bookmark, provided it can be clicked fast enough.
However,
setInterval("alert('irritate')",10)
can only be stopped by
javascript:setInterval=function(){}
BEFORE the script is run.
Good luck with:
<script>
(function(){(function r(){alert('irritate');r()})()})()
</script>
or even simpler
<script>
( function r(){alert('irritate');r()} ) ()
</script>
Setting alert=function(){} will stop all messages but the script and its recursion of r will not stop until SO or system time out. Also, r is not in the global environment so r=function(){} is ineffective.
Some FF versions need an interesting solution, found on SO, if the alert response is mandatory, to kill the annoying page w/o killing the browser and other open tabs, by using ctrl-F4 to close the tab of the offending page. To aid the manual reflex and dexterity required to do this fast enough, ctrl-Enter is used to respond to the prompt and while ctrl-Enter is pressed F4 is typed.
Related
I'm restructuring a page for a client, and I'm having some issues with the jQuery code I implemented on the page.
There's a pop-up lightbox that uses Prototype which appears when the page loads, and then there's marquee/scrollers on the top and right that I put there that use jQuery. I'm really unsure about what's causing the error.
I'm familiar with jQuery's noConflict, but I've tried pretty much every variation of it on this page and I still get an error - after a few seconds the marquees stop - and IE displays that "Errors on page" dialog, referencing line 464 ("Array length must be assigned a finite positive number").
Here is the page: -link removed by author-
Here is prototype.js: -link removed by author-
I have absolutely no idea what is causing this error and JavaScript isn't my strongest side.
When I first started seeing this error, I was Googling around for more general "Prototype + jQuery" errors, when I should have been looking for a solution specific to the exact problem I was dealing with.
Adding the terms "array length" and "line 464" actually led me to the solution to this specific problem, and here it is:
Updated from prototype v1.4 to v1.5.1.2 (v1.7, the latest release,
didn't work right and even produced a stack overflow error).
Changed around the order of the scripts, and changed noConflict:
<script src="/scripts/jquery-1.5.2.js" type="text/javascript"></script>
<script src="/scripts/jquery.Scroller-1.0.src_4.js" type="text/javascript"></script><!-- all _$_'s replaced with _jQuery_ -->
<script type="text/javascript">
<!--
// more jquery, all $'s replaced with jQuery
-->
</script>
<script type="text/javascript">
<!--
jQuery.noConflict();
-->
</script>
<script src="scripts/prototype-1.5.1.2.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
// everything else, including prototype scripts
-->
</script>
And that's it! Now I don't get the "Line 464" error and all scripts work fine.
Thank you #Ken and #Diodeus for leading me to the solution.
You may need to go through the plugins and replace $( with jQuery(, since you need to use "jQuery..." instead of "$..." in no-conflict mode.
Surround the code that uses jQuery with
(function ($) {
... // Your code
})(jQuery)
This way it uses local $ which is bound to jQuery and and jQuery only.
Also it is considered a bad idea to use both frameworks on the same website. You can find jQuery replacements for pretty much all of Prototype plugins.
I would find plugins in the same library. jQuery has all the plugins you mentioned, so there's no need to try using both. These two libraries can be difficult to get working together.
If you're set on using both libraries, try this ordering:
1) other lib
2) jquery
3) noconflict call
4) all plugins
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="/scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$.noConflict();
-->
</script>
<script src="/scripts/jquery.Scroller-1.0.src_3.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>
<blink>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='/lightview.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript" src="/photography/js/scrollable.js"></script>
<script>
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div.scrollable").hide();
});
// Use Prototype with $(...), etc.
$('div.box').hide();
</script>
</blink>
My code isnt working im not sure why?
any advice?
You need to use jQuery.noConflict() to release $ back to prototype, like this:
jQuery.noConflict(); //restore $ to prototype
jQuery(document).ready(function(){
jQuery("div.scrollable").hide();
});
$('div.box').hide();
Though jQuery can do show/hide, so you may not need both libraries, depending on what you're doing (for example, there are lightbox plugins for jQuery and scrollable plugins for prototype, so you could go either way with using a single library for everything).
You can also give it an alias from the $ restoring call, it returns a reference to jQuery, so you can do this:
var $j = jQuery.noConflict(); //restore $ to prototype
$j(function(){
$j("div.scrollable").hide();
});
$('div.box').hide();
Once I had the same problem, using Prototype and jQuery on the same page, and specifying the jQuery.noConflict() function, but my stuff didn't fade in/out right (stuff were jumping weird and sometimes only worked on the first animation). When I disabled Prototype, my jQuery code did exactly what it was supposed to do. I came to the conclusion the jQuery and Prototype have the same function names and these cause conflict in some way.
Disable Prototype temporarily and see if your jQuery code performs as expected.
I haven't explained this well.
But what i mean is, if I have an ajax script that loads the content of a page in a DIV element, through the function 'loadpage('whatever.php');, instead of going around manually doing this to all links, is there a way of having a script that automatically makes all regular links load through that ajax function?
Like on Facebook, your profile loads through ajax, yet if you look at their code, they just have a regular link to the profile.
Cheers!
Sure, you can do it with jQuery.
This script goes through the document, finds every anchor element and binds an event handler to the click event of each. When the anchor element is clicked, the event handler finds the href attribute and loads that page into #targetDiv (you can call this div whatever you want, of course).
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("#targetDiv").load(($(this).attr("href") + " body");
return false;
});
});
</script>
...
<!-- In your document body, this is the div you'd load the pages into. -->
<div id="targetDiv"></div>
You can use JQuery for this (if I understand your question right).
First you can make the function loadpage() as follows:
function loadpage(divId, url) {
$('#' + divId).load(url);
return false;
}
.load() isn't supported by all browsers though. If you want to do this without .load() then you can check out .get(). For more info on .load(), take a look at http://docs.jquery.com/Ajax/load
I'm assuming it would go something like this:
$(document).ready(function(){
$("a").click(function(){
$("body").load($(this).attr("href") + " body");
return false;
});
});
This would make all <a> tags on the page call a function that downloads a HTML document from the href attribute of the tag, strip out it's body tag, and replace the contents of the current page's body tag with the contents of the new body tag. This way, it's easier to work this with no JavaScript, as well as integrate it into an existing site.
To use it, you place this into a <script> tag in the head of your main page, or in an external JS file.
Please note, however, that this code only updates the contents of the <body> tag, the head (including the title tag) remains untouched. You may need to add extra code to update things like this.
Simple and Nice. Check this out:
Bjax
Usage:
<script src="bjax.min.js" type="text/javascript"></script>
<link href="bjax.min.css" rel="stylesheet" type="text/css" />
Finally, include this in the HEAD of your html:
$('a').bjax();
For more settings, checkout demo here:
Bjax Demo
I thought this was pretty straight forward but I don't get the same results as the tutorials I read. I have a button on an html page that calls a function in script tags. I also have a reference to the prototype.js file which I haven't even begun to implement yet. If I leave that reference in the page, my function call does not work from the button's onclick event. Below is what is called from the button onclick event.
callIt = function(){
alert('It worked!');
}
</script>
A couple of things: first, make sure your HTML is valid. Run it through the validator at http://validator.wc.org.
Next, once you're sure that your page is valid, add the prototype.js library as the first script reference on the page:
<script type="text/javascript" src="prototype.js"></script>
Notice that I didn't close it like this <script ... /> Script blocks need to have an explicit closing tag (at least in XHTML 1.0 Transitional)
Now, to answer your question, I'm really not sure what you're asking, but if you wanted to attach the callIt method to the onclick handler of your button using Prototype, then do this:
Event.observe(window, 'load', function() {
Event.observe('button_id', 'click', callIt);
});
Put this in script tags in the element of the page, below the prototype script reference. This will execute when the DOM is loaded & the button exists on the page.
Hope this helps.
That worked. I'm just puzzled why none of the examples I have been working from have done this.
Thanks!
I have been reading up on this, and it seems that if you use ajax you can only bring in content that resides on the same domain whereas with an iframe you can bring in content from any domain. Is that the case? What other differences are there?
Bear in mind they're two completely separate technologies.
A (i)frame really loads a complete HTML page in area into the browser. Whether the page is on the same or another domain, for pure viewing, doesn't matter.
Ajax only describes a system to facilitate JavaScript to talk with (and with current security restriction across browser, only with) the server from which you document within which you generated the JavaScript call from.
The (i)frame technology loads and renders a complete HTML page from any URL given. Certain security restrictions accessing other documents from other domains with JavaScript still apply.
With Ajax, it's only meant to use purely JavaScript to talk to the originating server (send some data) and usually get some data back. In JavaScript. What this data is and what you do with it, is up to you. Whether you insert it into the DOM (Document Object Model), exchange parts or load a new page is up to you.
To a certain degree you have all freedom you want. You can have an (i)frame on a page, still make a Ajax call and decide to load another URL into the (i)frame. Or use the Ajax return value to generate new HTML dynamically inside the (i)frame. Or outside, in another document.
The security restrictions applying in this case is called "same origin policy".
Quite simply, an iframe is like a regular frame, but it doesn't split the browser window up into sections, it sits right inside a page and is affected by the scrollbar.
Ajax, on the other hand, uses javascript to do partial loads of a page, allowing small amounts of data to be loaded from the server without needing to do a complete postback. For example, Youtube uses Ajax when you post comments, vote, queue videos to play, etc. They do this so that your video isn't interrupted and restarted by a complete page postback.
Besides these differences mentioned by others, there are others as well.
iframe loads an entire html/php page, whether it is from the own server or other external server. Usually, it has a fresh <html>, <head> and <body> tag as well. Ajax only loads part of the html/php page.
Besides, Ajax pulls the CSS (and maybe, even javascript codes) from the parent file, but in case of Iframe, it cannot pull the same.
E.g this is the master file coding.
<!doctype html>
<html>
<head>
<style>
.gappu {background-color:black;color:red;}
</style>
<meta charset="utf-8">
<script src="../AllJqueries/jquery-1.11.3.min.js"></script> <!-- Use your own jQuery file -->
<script>
<!--
$(document).ready(function(){
$.ajax({url:"slave1.php?bare=true", success:function(data){
$(".myDomain").html(data);
}});
}); /* End of Main Jquery */
//-->
</script>
<title>Ajax vs Iframe</title>
</head>
<body>
<div class="myDomain"></div>
<div>Iframe below</div>
<iframe width="100%" height="500px" src="slave1.php"></iframe>
</body>
</html>
Now, we also have another file, named as slave1.php
<?php
if(isset($_GET['bare'])) $bare = $_GET['bare'];
else $bare = false;
if(!$bare):
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.gappu {background-color:blue;color:yellow;}
</style>
<!-- You can remove the above style later, and see the difference. The parent style will not apply for iframe -->
<title>Inside the Iframe</title>
</head>
<body>
<?php endif; ?>
<div class="gappu">Hi, welcome to this demo</div>
<?php if(!$bare): ?>
</body>
</html>
<?php endif;
In case of Ajax call, the line Hi, welcome to this demo will be in black background and red color, since it is borrowing the css from the parent. But in iframe, it will be in blue background and white color, which is defined in slave1.php. You can remove the style from slave1.php, and you will find plain text printed in iframe format.
Hope this helps. Cheers.
Vijay Srinivas