javascript bookmarklet calling another function - javascript

I am trying to call a javascript function to modify a page its Dom elements. Since I am doing the same thing 6 times i would like to call a function from the first function. Not quite sure how I can do that.
javascript:(function(){
//DoStuff
}());
I have working javascript inside that block and this executes as it should
However now i want to do something like this:
javascript:(function(){
function AlterPage()
{
ModifySector(0);
ModifySector(1);
ModifySector(2);
ModifySector(3);
ModifySector(4);
ModifySector(5);
}
function ModifySector(sectorNumber)
{
//DoStuff
}}());
So I am now trying to call the same code that executes above 6 times, with a different parameter. This does not work at all. It this at all possible without creating an external script file? And if so... how?

Not entirely sure what's going on but it seems to only be you are invoking the ModifySector();
but not the AlterPage();
so nothing will happen.
something like this may work:
store it all in an array and use a helper...
const myArr = ['dog','cat','turtle','snake','hamster','fish']
function AlterPage(sectorNumber){
ModifySector(sectorNumber);
}
function ModifySector(sectorNumber)
{
console.log(sectorNumber);
//DoStuff
}
myArr.forEach((e) => {
AlterPage(e);
});

Ok, i am an idiot. I only needed to actually call the function and it worked :)
javascript:(function(){
AlterPage();
function AlterPage()
{
ModifySector(0);
ModifySector(1);
ModifySector(2);
ModifySector(3);
ModifySector(4);
ModifySector(5);
}
function ModifySector(sectorNumber)
{
//DoStuff
}}());
that does the trick

Related

Recognising variables while assigning a function to a variable in javascript

In my jQuery scripts, when the user closes a menu with an animation, I have to call a function after the closing animation is finished. I want to assign this function dynamically by calling a function openStrip() with a parameter. My code looks like:
var FUNCTION_JUST_AFTER_MENU_CLOSE = function(){};
function openStrip(stripId){
FUNCTION_JUST_AFTER_MENU_CLOSE = function(){
createStrip(stripId);
});
}
if I call openStrip("aStripId"), I expect FUNCTION_JUST_AFTER_MENU_CLOSE to be:
// #1
function(){
createStrip("aStripId");
}
whereas my current code gives:
//#2
function(){
createStrip(stripId);
}
i.e, the parameter passed to the function openStrip() is lost while assigning the function() to the variable FUNCTION_JUST_AFTER_MENU_CLOSE.
How can I avoid this.
EDIT: I discovered that my code is actually working. The problem was elsewhere. I got confused because when I looked at Chrome's debugger, it was showing me the function definition as is (#2 in above). But when it actually went down executing that function later in the code, it did evaluate the values of the passed argument, and endedup executing #1.
Thanks for the answer though. I am marking it correct because that is perhaps a better way of assigning the function.
The best way is to return a function, from openStrip like this
function openStrip(stripId) {
return function() {
createStrip(stripId);
};
}
For example,
function openStrip(stripId) {
return function() {
console.log(stripId);
};
}
openStrip("aStripId")();
# aStripId
openStrip("bStripId")();
# bStripId
You can even assign the function objects returned to different variables and use them later on
var aStrip = openStrip("aStripId");
aStrip();
# aStripId
aStrip();
# aStripId

How to select and replace an entire JavaScript function using RegEx and Fiddler

I need to rewrite a JavaScript function with Fiddler. I believe this answer partially addresses the problem; however, I'm still searching for RegEx information. For example:
function traceThis(message) {
//setTimeout(function() { window.opener.childWindowMessageHandler(message);}, 100);
//if (!window.console) console = {};
//console.log(message);
}
needs to become:
function traceThis(message) {
setTimeout(function() { window.opener.childWindowMessageHandler(message);}, 100);
if (!window.console) console = {};
console.log(message);
}
I imagine it would be simpler to match and replace the individual lines within the traceThis() function; however, I think it would be most useful to learn how to select and replace any desired function from the "function" to its closing "}" regardless of statements within it.
HBP's answer won't work, because the toString() function isn't available until the script is actually running. But he does point to a simple way to solve this problem that probably won't require either a JS parser or a complicated Regular Expression.
Namely, simply do a straight string-replacement of:
function traceThis(message) {
with
// Here's my NewFunction
function traceThis(message)
{
// My new instructions here
}
function OriginalVersionOfTraceThis(message) {
That way, when your injector runs, it overwrites the front of the old function with your desired script code, and renames the old function to something else (that will never be called).
The source of a function can be gotten by traceThis.toString () From there you can do whatever changes you want then recreate the function using new Function

JavaScript function fired?

I'd like to ask somthing that maybe is wrong, but I not sure.
Is there a way to know when a specific function is executed, in order to run a sample of code? I like to make it like an event.
The problem I have is the thick box. I like to resize the thickbox according to the image that display.
To do so, I need to know when the thick box is executed.
Any idea please ?
Thickbox use global function, so you could do below: (As #alex suggested.)
(function($) {
var original = tb_show;
tb_show = function () {
$(document).trigger('tb_show');
return original.apply(this, arguments);
}
})(jQuery);
Then you could bind the event:
$(document).bind('tb_show', function() {
//event handler
});
You could overload the thickbox plugin invocation.
I'm going to assume it is called on a collection with thickbox(), e.g. $('.container img').thickbox().
(function($) {
var original = $.fn.thickbox;
$.fn.thickbox = function() {
// Whatever you need to do here.
return original.apply(this, arguments);
}
})(jQuery);
Now, when you call...
$('.container img').thickbox()
...the code will call your new function before handing the control over to the original function.
You can do whatever you want where it says // Whatever you need to do here. :)
I am not a JS developer but you can create a callback function and make it execute when that specific function is executed.
You can find a good explanation here: JavaScript Callback Scope

Calling a method within a Javascript Object

I'm trying to create a javascript object that can call other methods within itself. However, I'm running into a weird problem that I just can't seem to figure out.
I have the following code
myObjectDef = function() {
this.init = function() {
//do some stuff
this.doSecondInit();
}
this.doSecondInit = function() {
//do some more stuff
}
}
myObject = new myObjectDef();
myObject.init();
I am getting an error that states "Message: Object doesn't support this property or method". And it ends at this.doSecondInit();. I can't quite figure out why it's doing this. My code runs great up to the call to the second method. How do I make this work?
There's an extra set of parenthesis here:
this.doSecondInit() = function() {
You can't assign to the result of a function call, let alone to the result of a function that doesn't even exist.
After your edit, your thing seems to work fine:
http://jsfiddle.net/nabVN/
You sure you didn't have the same typo in your actual code? Better start getting used to not putting that () after every function call, which is probably a bad habit carried over from languages where functions aren't values.

Pass function to jQuery .ready() function

I am currently making use of Simon Willson's addLoadEvent function to add functions that I want to run after the load event. I ran into a problem wherein the the function I passed to the addLoadEvent function referenced a div that had not yet been loaded by the DOM and so my action (showing the div) did not do anything. When I changed to using the jQuery $(document).ready function, the div has been loaded by the DOM and I can execute actions with it (make it show up).
So, a couple questions. Why is my function being executed before the DOM has completed loaded using the above function? Is there a way to delay it? The other alternative that I can think of is passing in a function to a jquery equivalent:
function jqueryAddReadyEvent(myFunc)
{
$(document).ready(function()
{
//execute already existing functions
//add a new function to the ready event
myFunc();
}
}
When I try the above code, I get a javascript error "myFunc is not a function". Is there a way to generically pass in a function to the jquery ready function and have it execute? Equivalent to the following:
$(document).ready(function()
{
funcA();
}
$(document).ready(function()
{
funcB();
}
...//more of the same
Replaced with the following:
jQueryAddReadyEvent(funcA);
jQueryAddReadyEvent(funcB);
You can just do:
$(document).ready(myFunc);
to attach functions to the DOM ready event. Here's the fiddle: http://jsfiddle.net/padtE/
If you will require many functions to be added then I suggest you do the following:
Create an array that will old all the functions you want to call.
Add functions to that array as you please.
In the .ready(function() { ... }) call every function in that array.
You're set.
It looks correct to me. Most likely you are calling it with something not a function.
Btw you can shorten this to:
var jqueryAddReadyEvent = $(document).ready
or just use $(document).ready() directly for the same effect, as it specifically does what you want to do, run functions after the load, and is actually shorter.
$(document).ready(funcA);
$(document).ready(funcB);
function jqueryAddReadyEvent(myFunc) {
$(myFunc);
}
jqueryAddReadyEvent(function() {
alert('hello world');
});
Demo: http://jsfiddle.net/AlienWebguy/UzMLE/

Categories