JS Bookmarklet Not Working in IE11 - javascript

long time lurker, first time poster.
The basics are this:
Inspired by this blog post, I'm attempting to create a bookmarklet for our QA team to quickly populate a form.
The bookmarklet works perfectly on my machine (TM) in Chrome, IE 10, and IE 9 compatibility mode. I've tested the bookmarklet on the QA team's machines, and while it works fine on their Chrome browsers and on IE 9, the bookmarklet doesn't work on the two machines running IE 11.
Details:
Of the two machines running IE 11, one is on Win 7, the other is on Win 8.1. The machine running IE 11 on Win 7 is updated to IE version 11.0.9600.17207IS, and will also run the bookmarklet correctly in Chrome.
I've attempted a couple different variations, the first based on the CSS-Tricks blog post mentioned above.
<a href="javascript:
(function(d) {
var body = d.getElementsByTagName('body').item(0);
var script = d.createElement('script');
script.src = 'https://company.siteurl.com/unrelated/DisclosureRegister.js';
body.appendChild(script);
}(window.document));
alert('Bookmarklet js fired!');">Disclosure Register Bookmarklet</a>
The second, based on a StackOverflow Response, is as follows:
<a href="javascript:
(function(){
var s=document.createElement('script');
s.type='text/javascript';
s.src='https://company.siteurl.com/unrelated/DisclosureRegister.js';
document.getElementsByTagName('head')[0].appendChild(s);
}());">Disclosure Register 2</a>
Both codes work on my machine in the previously mentioned browsers, neither work in IE 11 on the other machines (I don't have IE 11, can't test it directly on my machine).
I get no error message in console in the developer tools, and the DisclosureRegister.js file isn't listed in the developer tools' file list. It appears that the bookmarklet simply isn't firing.
Neither one of those bookmarklets have a Web Documents tab when I right click > properties, however, a simple javascript alert bookmarklet I provided them with does have the Web Documents tab, and it works perfectly in all browsers (including IE 11).
Click me!
I'm delivering the bookmarklets by writing the html in Codepen, emailing them a direct link to the Codepen (I don't have enough reputation points to post the link), and having them drag the link from the Codepen output to their browser favorites bar.
I came across something that gave me hope it was a bug with an older version of IE 11, but the IE version being used is even newer than the version that fixed the related bug.
Just in case there's something in the DisclosureRegister.js file that's causing IE 11 to abort the javascript, I'm including the code for that as well:
(function (win, doc, $, undefined) {
//Don't run if jQuery isn't loaded
if (typeof window.jQuery === 'undefined') {
return;
}
alert("Script is being called!");
}(window, window.document, window.jQuery));
The question:
While I'm certainly not ruling out an error with my code (and of course, please correct me if it's wrong), is there anything peculiar with IE 11 in the way it handles javascript bookmarklets that I need to account for in the code?
Thanks in advance for your time!

I wrote that article. Really glad you guys are finding it useful.
It seems there a bunch of people complaining about bookmarklets not working properly in IE11. One thing I'd test is how IE11 handles same origin policy. Check out this link, and see if you can temporarily disable same origin policy. Then test.
Obviously it won't solve the problem, but it could lead you in the right direction.
Hope that helps a bit. Let me know.

I think I found what is the problem with bookmarklets in IE11. I just added a bookmarklet in IE11 and it wasn't working so I started googling and found this page. Then I found bookmarklets at Microsoft's own website where they actually recommend to use it and it works. Then I decided to check if the syntax is correct and this where I found a problem. For some reason IE cuts part of long bookmarklets when it adds it to the toolbar by draggin-dropping. My bookmarklet that I was tried to add was several brackets short of original and because of that the syntax was incorrect. I then copy-pasted full code manually and it started working.

I was able to resolve the same problem by removing all line breaks from the bookmarklet code. IE 11 apparently doesn't know how to handle them.
With line breaks in the bookmarklet code, after adding it to "Favorites" the properties showed a blank URL and nothing would happen when clicking it.
With the linebreaks removed (ran a regex to collapse all whitespace to a single space character), after adding it to the "Favorites" the properties show the correct javascript in the URL field and it runs correctly when clicked.
I wasn't able to find anything anywhere documenting this limitation.

Related

Firebug has stopped showing me javascript source [duplicate]

Why does Firebug say there is No Javascript on this page when there are clearly loads of JavaScript on the page. I even reloaded the page several time to make sure but it still show the same message.
It never used to do that before, but all of a sudden it misbehaves.
Is it because of some configuration issues or because of something else?
As of Firefox version 50, it seems that Firebug will no longer work as Mozilla are migrating to Firefox Devtools. The tab Tools/Web Developer has a 'debugger' option. See this page for a discussion on the migration. Read all the posts dated 19 November for further information.
It seems to me that the option gives less functionality but Firebug per se is never going to be fixed for Firefox 50 and beyond
EDIT 2017 April
This answer is now outdated and I'm not even testing it anymore because I'm no longer using Firebug (a shame, I loved it years ago in a time it was The tool of trade for web developing).
EDIT 2014 November
The original answer is now more than a year outdated due to firebug evolution.
Thanks to #AmadeusDrZaius to keep it on tracks
Answer for outdated firebug versions
For anyone still with this problem after updating Firebug.
Just click Clear Activation List option inside the Firebug menu.
For those who can't find it, note that "Clear Activation List" shows up in the dropdown from the Firebug icon in the toolbar, but not the Tools > Web Developer > Firebug menu.
I guess due to the bug previous hitting your working page it stays listed as "no activate FB for this site please".
I encountered No Javascript on this page after upgrading Firefox to ver 50.0, with Firebug ver 2.0.18. I tried refreshing Firefox, even completely uninstall Firefox and installed again. Nothing works for me.
A couple of hours later, I downgraded Firefox to 49.0.2, and voila, it works right away. I downloaded the old version here.
I tried everything on this list and nothing worked for me except resetting Firefox like so:
https://support.mozilla.org/en-US/kb/reset-firefox-easily-fix-problems
I realize there are already 10 answers to this question, but in my case none of them helped. I'm running Firefox version 39.0 and Firebug version 2.0.11. The only fix is to completely restart Firefox (i.e. not just the tab or instance with the problem).
Perhaps it's due to Firefox's over-usage of memory, or maybe there's a bug in Firebug. I can't speak to that, but what I do know is it didn't work. I killed Firefox, opened the exact same page again with no changes made and now it works. This has happened to me numerous times and a complete restart always fixes it, but that's the only thing that does.
Since Firefox 49.0 and Firebug 2.0.18 the Script panel is broken. This is due to some internal Firefox API changes. And because Firebug is officially discontinued, this unfortunately won't get fixed anymore.
There was also a bug in Firebug 2.0.11 (and below) in combination with Firefox 39.0 causing this problem. This bug is filed as issue 7918.
It happens when the Script panel is enabled and you close Firebug and reopen it.
You can see two related error messages logged to the Browser Console (can be opened via Ctrl+Shift+J or Firebug menu > Developer > Browser Console):
error occurred while processing 'attach: TypeError: docShell is null
Stack: getChildDocShells#resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webbrowser.js:53:7
...
and
onPacket threw an exception: Error: Server did not specify an actor, dropping packet: {"error":"unknownError","message":"error occurred while processing 'attach: TypeError: docShell is null\nStack: getChildDocShells#resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webbrowser.js:53:7
...
Solution:
The only solution until this bug is fixed is to restart Firefox completely.
Similar things have happened to me because I forgot to add the closing tag.
DON'T do this:
<script src="some.url" type="text/javascript">
or
<script src="some.url" type="text/javascript"/>
DO this instead:
<script src="some.url" type="text/javascript"></script>
The same problem just happened to me. I thought that it was a problem in my scripts, but I checked google.com and the problem persisted.
My problem was that I had updated my version of FF and kept the old version of FireBug. When I updated FireBug and everything was solved.
From firefox 49, the fire bug will be built in and it is called fire-bug next. So the fire bug add on won't work properly and no issues will be solved. So you can use firefox inspector. See here for details information
If the problem only shows up on a single page, check that your script folder is referenced from current folder (".") or that's reachable from the server root ("/").
<script src="./scripts/pagescripts.js" type="text/javascript"></script>
may not be the same as
<script src="/scripts/pagescripts.js" type="text/javascript"></script>
As mentioned, sometimes there's a Javascript syntax error that invalidates the whole script. But I have also had this, and simply opening up the page in a new tab or window and refreshing firebug (disable, enable) gets the javascript to show up again.
One time this caught me out was when I published one of my sites and I was checking it out. No Javascript was working, there were no errors in the console and firebug showed no scripts.
It turned out that in that instance, I'd forgotten to allow the site in NoScript - so there really were no scripts being loaded.
Not sure if that's the problem you're facing but it's worth being aware of.
I also got this error when attempting to use Ajax to a different server than the one serving up the page. JavaScript only allows Ajax access to the server that served up the page.
This problem is STILL happening (Aug 2015) with Firefox 39.0.3 and Firebug 2.0.11
For people saying the code is wrong or missing end tags etc. all I did to get all the javascript to reappear in tab was to shut down Firefox and restart it. I didn't change anything. Also that "Clear Activation List" option didn't work (no idea what that means)
I upvoted #Tom_Thomson's answer above, but I am wondering if simply removing and then reinstalling the Firebug add-on might not have accomplished the same thing without losing all the other stuff like bookmarks.
FWIW this problem is still happening in August 2016. I'm using Firebug 2.0.17 with Firefox Dev Edition 50.0a2.
As a workaround, I'm able to use the Developer Tools, though they are not as robust as Firebug (when it's working).
Well Firefox native Inspector is good... I know that you will miss some things, but in general we can survive with it. The good news is... less one addon, FF will be faster :)

Firefox Bookmarklet in Chrome

I wrote a little bookmarklet that works great in firefox, trying to use it in Chrome and not having any luck. Just tried out a stub bookmarklet javascript:alert('wtf'); which works fine in Firefox but not at all in Chrome. Trying to pick apart a couple of my pre-installed Chrome Bookmarklets and can't figure out why they run and mine don't. Having a lot of trouble finding documentation on this, thought I'd ask:
The javascript that I use is pretty much identical between Firefox and Chrome, the javascript: command for the bookmarklet is identical between my firefox bookmarklets and pre-installed chrome bookmarklets, so is there something else going on here?
Here's the actual bookmarklet (not just the stub)
javascript:function(){myscript=document.createElement('SCRIPT');myscript.type='text/javascript';myscript.src='http://applegator.net/script.js';document.getElementsByTagName('head')[0].appendChild(myscript);}
Some strange formatting things happened to it when it landed in chrome, still trying to sort it out, but think its basically right.
Am pretty new to Chrome so maybe this is something to do with them, just can't figure it out.
Thanks,
I just added your bookmarklet successfully in Chrome. However, I discovered that bookmarklets will not run on certain important pages like the New Tab page or anything else that starts with chrome://.
Perhaaps your choice of test page is your issue?
You have to put a space after the javascript: alert('like so');
if you want to do anything more complex, use a closure:
javascript: a=function(){alert('poop');alert('morepoop');}();
the (); is a shortcut for self-invocation of the closure

Javascript not working on IE 7 and IE 8 on Vista

An Example of this can be seen here:
http://nces.ed.gov/datalab/quickstats/default.aspx
Try clicking on one of the groups on the left and it should refresh the workspace with that group.
It works fine on all browsers in Windows 7 but fails in IE 7 and IE 8 on Vista.
I have this function:
function SelectGroup(gid, glevel, gtext) {
alert('not running on my environment only in vista');
}
And this is what calls it:
<a href="javascript:SelectGroup('3','3','Beginning college students')" style='text-decoration:none;'><span id='span_draggable_3' onmouseover="NavOver('3','3')" onmouseout="NavOut('3','3')" style='cursor:pointer;'>Beginning college students</span></a></div>
Some general suggestions:
Try to look if you have error messages, what do you mean by failed?
Try first with FireFox, it has better development tools.
IE8 has decent enough debugging tools, why wouldn't you use this?
Use a library like Mootools and JQuery to abstract differences between the major browsers
What about the old alert way of debugging things, have you tried it?
Try to narrow the problem the best you can, from my experience, this snipet is too big
edit: By telling in comments alerts don't run, it means you have an actual JS error somewhere and not a logic bug. Click on the error signal, bottom left of browser (yellow triangle with ! I believe), what is the message?
Edit: My friend, you have two other events I missed, What is the code of the onmouseover event, this might trash your code.
AND you have a </span> in the wrong place (no matching opening tag) this can also cause issues.

Canvas application not working in IE9 & working incorrectly in FF4b7

I'm working on an online roguelike game. It's current version is located here. It's working fine in Chrome 9 and Firefox 3.6, but it makes Firefox 4 beta 7 unresponsive for about a minute on every move and IE9 just says that it doesn't support <canvas> tag.
Could someone please explain these strange behaviours of IE9 and FF4b7?
Thank you very much.
In IE9 hit F12 and you'll see your site is loading in quirks mode which is why it doesn't have canvas. From F12 you can switch it and see that you're site does work if it is in IE9 standards mode.
I think you want to put DOCTYPE html before everything else to avoid this.
http://en.wikipedia.org/wiki/Quirks_mode
I am posting this in case it helps someone else (I found this page when I was googling)
Pages worked fine in Firefox
In IE9 pages were working locally, but not from server. ("getContext not supported etc. etc.")
Had run out of ideas, but noticed that a trial of part of my page containing canvas did work.
Long story short:-
My pages were .htm and so I thought "Is there an HTML5 standard ?" well I'm not sure if there is but when I changed all pages to .html the site behaved as intended in IE9 with all canvas elements working.
Bob

Object Focus problem with Safari and Chrome browsers

I have the following javascript being called to request a focus when page is loaded.
This code works 100% OK with Firefox and IE7, but Chrome and Safari do not seem to move the focus at all. How to make it work with all browsers?
document.getElementById("MyFlashFile").focus();
It took me hours searching the Internet, but finally I found a solution that works on the lastest versions of IE, Firefox, Chrome and Safari.
The following code solves the problem for good:
<head>
<script type="text/javascript" src="swfobject.js"></script>
<script>
function setFocusOnFlash() {
var f=swfobject.getObjectById('myFlashObjectId');
if (f) { f.tabIndex = 0; f.focus(); }
}
</script>
</head>
<body onload="setFocusOnFlash()">
This example assumes the flash is embedded using the SWFObject library. If not, you should set the f variable to the Object or Embed tag which holds the flash movie.
Edited on 5 May 2012: Well, unfortunately it seems that the tabIndex workaround no longer works for all combinations of browser (Chrome/Safari) and operating system.
For instance, currently Chrome 18 on Windows fails.
See the link below, provided by Christian Junk, to get the status of the problem's resolution.
Unfortunately there is no way to ensure that you can set focus to a flash file that works in all browsers. IE and Firefox have solved this problem (for the most part), but Chrome and Safari are both based off of Webkit which does not have a solution.
If you ever notice on YouTube or other video / flash site that the first thing you see is something to entice you to click on the player, that is due to this problem.
One developer came up with a clever workaround, but it does involve adding some ActionScript to your flash file, this can be a pain in the ass if you are building a generic player.
Gary Bishop: Fixing Firefox Flash Foolishness
Another sort of solution is to set your wmode to opaque. I've heard this works in some situations, but will screw up cursors in text areas. I haven't had much luck with this either, but you can give it a shot.
You can find more information about the no focus bug on bugzilla.
It seems that there is a bug in Chrome:
"window.document.getElementById('swfID').focus() not working for flash objects"
http://code.google.com/p/chromium/issues/detail?id=27868
I've tried to find a workaround but I was not able to find one ;(
Regards,
Christian
In addition to Cláudio Silva answer , you need to set wmode="opaque"
Ensure this code is being called after the entire page has been rendered. It's probably being called above the HTML it refers to, so the element will not exist yet.
Various JavaScript frameworks have utilities to tell you when the DOM is ready.

Categories