I'm working on a moderately-complex Bookmarklet that works just fine in Chrome, but I can't get it to work in Firefox. When I run my Bookmarklet in Firefox it redirects to a new page that only says true on it.
I've narrowed the cause down to a very specific thing: Firefox doesn't seem to like when you expose new functions to the global namespace.
If this is the case, might you know more about it? Is this documented anywhere, such that I can learn more about it? Resources on the nuances of bookmarklet-building seem scarce, and I can't find anything relevant. A second question would be if there are there any known workarounds.
And for some examples (remember, to test them simply copy these lines of code into a bookmarklet in Firefox. Then run them on any page).
Redirecting bookmarklets
javascript:!function(){window.okay={test:function(){}}}();
The project I'm working on
A Non-redirecting bookmarklet
javascript:!function(){window.okay={test:!0}}();
Any thoughts? Thanks!
For now, I plan to use manual subscriptions in Knockout to get the functionality I need. It'd still be nice to know the answer to this question, though.
It has nothing to do with exposing globals. It has everything to do with the final evaluated value of your bookmarklet.
Any JS code that is evaluated always returns a value which comes from the last line of code or the last block.
For me, in Firefox, both of your examples redirect because both return true. You can test this by pasting the code directly into Firefox console.
Furthermore...
javascript:!function(){...}();
This is weird. I've never seen this pattern.
This is the most common bookmarklet pattern these days:
javascript:(function(){...})();
As long as you don't end that anonymous function with a return, that pattern evaluates to undefined, and no redirect happens.
The older way of achieving the same result was to always use void(0); as the last line of code. That evaluates to undefined also, and if it is the last line, then the entire script evaluates to undefined, and no redirect happens.
Related
I am creating a chrome javascript bookmarklet with reference to:
this question
My code:
javascript:(function NoOverrideAction(t){this.currentWindow=t,this.urlMatchPattern=/https:\/\/.*visual\.force\.com\/apex\/.*/,this.urlMatchPattern1=/https:\/\/.*visualforce\.com\/apex\/.*/,null!=this.currentWindow.location.toString().match(this.urlMatchPattern)||null!=this.currentWindow.location.toString().match(this.urlMatchPattern1)?this.isPageValid=!0:this.isPageValid=!1,this.recordId} NoOverrideAction.prototype={getId:function(){this.currentWindow.location.search.substr(1).split("&").forEach(function(t){var i=t.split("=");"id"==i[0]&&(this.recordId=i[1])},this)},run:function(){this.getId(),console.log(this),this.isPageValid&&void 0!==this.recordId&&(this.currentWindow.location.href="https://"+this.currentWindow.location.hostname+"/"+this.recordId+"?nooverride=1")}};var noAction=new NoOverrideAction(window);noAction.run();)();
However, I get following error:
Uncaught SyntaxError: Unexpected identifier
This works well in console but not as a bookmarklet.
I am trying to verify the URL of my current page and replace the URL
Part I.
Several reasons why js-code might work in console, but not work as a bookmarklet.
1 - You don't use the established way of making bookmarklets, i.e. IIFE-functions.
javascript:(function(){
alert('hi');
/*code here*/
})();
2 - If you do use this structure, there might be the problem with comments.
Use /*multi-line comment*/ instead of //single-line comment (because bookmarklet is a one-liner, so you cannot close your comment)
3 - Some problems with semicolons ;.
Don't confuse statements (need semicolon) and assignments (do not need them).
Console has its "automatic semicolon insertion", but it is a problem for a one-lined bookmarklet.
You should read a bit more here: https://stackoverflow.com/a/2717956/5410914
Part II
Since there is no HTML-code to test, it might be hard to check. Moreover, you could have made it easier to read by making it multi-lined (it will still work as a bookmarklet when you paste it as a bookmark). But anyway.
The main reason it might not work is that you don't use IIFE-format (Immediately Invoked Function Expression).
Your code has function NoOverrideAction(t) and, moreover, there is };var noAction=new NoOverrideAction(window);noAction.run();)(); at the end. It is not IIFE.
Read more: https://developer.mozilla.org/ru/docs/Glossary/IIFE
To debug a bookmarklet on your own, since there is no HTML provided, you might try to make your code simplier (even with alert('hi'); at first, and verify the reason it won't start) and then make it more complicated once you figure out that it works.
This is a simple app simulating a chat. I provide jsfiddle:
http://jsfiddle.net/LkqTU/2785/
Some messages coming from the server, simulated by the button, and a user typing on a textarea binded to the keypress event to get te enter key and send the message.
Well, this is working fine in Chrome and Firefox but fails in IE9.
What could be wrong?
Thanks
Well, it was relatively easy to locate an error: assigning this to an external variable named self right at the beginning of Model function just doesn't look right.
The explanation why it worked fine in Chrome and Firefox, but failed in IE, though, is much more interesting. Obviously varless self refers to window.self, which is actually a special property of window object - reference to... window itself (MDN).
Internet Explorer is actually well-known for its specific treatment of this property: while in other browsers window === window.self evaluates to true, in IE it's false. And I wouldn't say IE does it without any reasoning; check this discussion for some details.
Ironically, in this particular example IE turns out to be a half-hero. ) I said "hero", because IE is the only browser that doesn't let you overwrite window.self. All the others are not so picky; add console.log(window.self) to the end of your script to witness their shame. )
And I said "half", because IE could be much more... heroic about it. ) Instead of ignoring window.self = ... line silently (and throwing an error for that far away line that used the ignored assignment in a slightly different way), why didn't IE just give an early warning? Damn, even a notice would do.
Anyway. It's pretty easy not to rely on IE's sporadic heroism for such things: just add 'use strict' line at the beginning your script, and voila! both Chrome and Firefox will spit out a 'Reference Error' warning right where it belongs - at self = this line. )
Yes, I understand that 'use strict' use is not a simple step, and it might break some scripts; yet I wholly stand by Nicholas Zakas' statement on that topic.
I have seen jquery-ui-1.8.11.js verify console.log functionality by doing
if (this.debug)
console.log()
I have also seen people define an anonymous function that is a no-op for browsers with no console logging like IE7.
if(typeof console === "undefined") {
console = { log: function() { } };
}
Is there a technical difference or are both functionally equivalent?
In the first example you've given, this.debug will be a reference to a debug variable in the jQueryUI code. This debug variable will have been set elsewhere, possibly by checking whether console is defined, but also possibly with other settings.
In any case, the first example is specific to the application; if you want to do a generic check to see whether the console is available, you'll need to use the second technique. You don't have to define an empty console object as per the example, but doing it that way does mean that you won't have to do the if() condition every time you want to call console.log().
Having said all of that, I would counsel you strongly to avoid putting any code into production which contains calls to the console. The console should only be used for debugging purposes while you are working on the code. It should not be necessary in final release, and doing so can be a sign that either your code is unstable or you're unconfident of it, neither of which is a good sign if you're releasing the code for live use.
(libraries such as jQueryUI are an exception to this rule, as they need to provide functionality for developers to do debugging while writing code using their library)
Both of those do something else. The first code suppresses logging messages unless a flag is set. The people who develop jQuery UI need logging when working on it, and turn it on. But people using the library don't want to have their console cluttered by log messages from libraries, so it's off by default. It lets you turn off logging even when the browser supports it – that regular users on IE7 don't get script errors is a (possibly intended) side effect.
The second code defines a dummy console.log(), so you can call the method without checking if it exists everywhere. It will not suppress logging on browsers where it's supported.
The second of the two is standalone, not relying on jQuery. In my opinion, that makes it better.
I'm not a JavaScript Wizard by a long shot. But I am a web-developer and so I need to know my way around it at least a bit.
Something I'll often do is simply alert a variable to see what it is.
However, the problem is that I'll often get a result like: "object HTMLInputElement". To me this means little to nothing. Sure I can look it up, but I need to alert children() of children() of children(), etc...
I've tried walking through the JavaScript with Firebug, but for some reason this is very slow. Firefox hangs when I start a debug session, for every single debug session and I don't know why.
So, I want to inform if there is a way to get detailed info on variables some other way. Or a system I can use to work with to make things easier.
I find the developer tools in Chrome work quite well, giving a good amount of detail on demand (usually just hovering the mouse over the variable in the script tab; if that variable is a structured object, a little tree control appears and you can drill down). But then, I don't have your Firebug issue either (or at least, not often anymore).
Debugging with alert is very time-wasteful and, as you've found, frustrating; if at all possible I'd look at using a real debugger (like Chrome's Dev Tools; I've also heard good things about Opera's).
This should help:
http://www.openjs.com/scripts/others/dump_function_php_print_r.php
The easiest way to inspect a javascript variable is with a debugger. If Firebug is not working out for you try using Google Chrome, it has an inspector built in.
Btw - not sure what you mean by "start a debug session". If you have firebug installed, you should simply be able to click on the firebug icon on the bottom right of your browser. Go to the script tab, and select from the drop down whatever js file you want, stick in a break point (just left-click on the margin) and refresh the page. I've never had a problem with Firebug, it's always worked extremely well. I strongly advise figuring out whatever your issue with it is, it will make your life a million times easier.
Using any of the browser dev tools, including IE9, you can use console.log to get the variable output on the console. What information this gives you will vary by browser, but with Firebug it allows you to explore the variable in the DOM inspector tab, with full access to all properties and functions (you can even copy the content of a function to paste elsewhere).
For instance:
var foo = {};
// Do lots of stuff with foo
if (typeof(console) !== "undefined" && console.log) { // prevent errors when console not open, ideally all console calls should be removed before going into production
console.log(foo);
}
This has the advantage that it doesn't require any break points, so no slow step-debugging. It won't solve everything though, you'll often still need the debugger.
I just started doing some Javascript work for a project, I do mostly backend work so I'm sorry for being new at this! Also, not using a Javascript framework because I want to learn about the fundamentals before making everything very easy for myself :)
So, here is my question/confusion: I wrote a little javascript that dynamically changed forms. This is how I called the code:
// loads the initial box
window.onload = initList(environment_box);
// loads artifacts on each change to environment select box
environment_box.onchange = changeList;
This worked like magic - in CHROME that is! I never noticed it wasn't working in Firefox (its just an internal tool, so I can assume decent browsers, but I figure hey, if its working in Chrome, it will work in Firefox!). So, I did some investigation, and it seems as though the code isnt getting executed in Firefox. I whipped out firebug and wanted to see what was going on.
The interesting thing was, when I enabled Console on firebug, my code got executed! I am very confused as to why, and I would much appreciate any help I could get. Thanks!
-Shawn
You are calling some method on console in your JavaScript is my best guess. Chrome has console defined be default, so it is not a problem.
On Firefox, however, there is no such global object (not without Firebug), so when you try to call a property on an undefined object like,
console.log(..);
it throws an exception which you are not catching, so the JavaScript execution halts.
You're probably calling a method of the console object which just doesn't exist by default in most web browsers. It may be always available on webkit based browsers (like Chrome) but with firefox/IE(/opera?) it requires an external add-on, either firebug or a javascript dependency.
Checkout things like firebugx which simply defines the most common methods of a console object as no-op functions.