href="javascript:..." syntax suddenly does not work in FB Iframe in FireFox

Question

Suddenly, all my ASP.NET LinkButtons (that use the href=javascript:__PostBack... syntax) stopped working for all FireFox user (various versions)

I narrowed it down, and found that simply all href=javascript: does not works inside the FB Iframe.

EXAMPLE: here is a trivial illustration: https://apps.facebook.com/realmofempires_stg/ (acess this page with Firefox to see for your self) It is trivial html code, with JS that calls alert('clicked')

<a onclick="alert('clicked');" >WORKS</a>

<a href="javascript:alert('clicked');" >does NOT WORK</a>

Yet this code works perfectly fine whem outside of the FB IFrame https://staging.realmofempires.com/chooserealm.aspx, or when inside a simple Iframe https://staging.realmofempires.com/chooserealminiframe.aspx, it works in all cases in all other browsers besides FireFox

QUESTION: Why the heck does it not work in FF?

Exact code of the html page:

<a onclick="alert('clicked');" >(1) WORKS: CLICK ME - How come this onclick=alert(a); works</a
<a href="javascript:alert('clicked');" >(2) DOES NOT WORK: href="javascript:alert('clicked');</a>

(a) `a` elements without an `href` attribute are invalid. (b) maybe it is related to http://stackoverflow.com/questions/6643414/javascript-alert-not-working-in-firefox-6 — Felix Kling, Oct 27 '11 at 16:24
@david, sorry, edited the post with the question. Basically, I can't figure out why the heck is stopped working.... it must be some JS code in facebook that is doing it... no idea what, JS is not my strong side — Greg Bala, Oct 27 '11 at 16:25
@FelixKling well the first links WORKS. with or without same HREF, that links works, the JS alert fires. it is the second one that does not, and only insider Facebooks Iframe, and only under FireFox — Greg Bala, Oct 27 '11 at 16:26
when i click (2) it alerts clicked, for all the three links above tested on FF 3.0 — david, Oct 27 '11 at 16:31
So this does not work for you either? http://jsfiddle.net/rckU9/ It works for me in FF 7 — Felix Kling, Oct 27 '11 at 16:35
@david, thank you for your help! I have not tested with ff3.0 but with various version of 6 and 7.0.1. Lots of our players report this issue as well, various versions — Greg Bala, Oct 27 '11 at 16:37
Both 1 and 2 in https://apps.facebook.com/realmofempires_stg/ work for me on Firefox 8. — Sean Vieira, Oct 27 '11 at 16:39
@rickschott in webdeveloper console, some warning, nothinhg that seems releated. No JS errors in firebug console — Greg Bala, Oct 27 '11 at 16:44
@FelixKling jsfiddle.net/rckU9 works fine. it is only when the code is inside FB Iframe. Take a look at my link, if you pop out of frame, the same code works — Greg Bala, Oct 27 '11 at 16:45
@SeanVieira thank you for testing in FF8! Good to know it works there, trying my self as well ... — Greg Bala, Oct 27 '11 at 16:45

score 2 · Answer 1 · edited May 23 '17 at 12:19

2

see if this helps JavaScript alert not working in Firefox 6

edited May 23 '17 at 12:19

Community

1
1

answered Oct 27 '11 at 16:41

david

4,218
3
23
25

thanks David, it makes sense, BUT, i am puzzled why does it work outside of frame, and not inframe... – Greg Bala Oct 27 '11 at 17:18
this is a longshot if your/clients browser has been recently updated try clearing you cache and see it that fixs it – david Oct 27 '11 at 17:35

score 2 · Accepted Answer · answered Nov 04 '11 at 14:14

    $(function () {
        var isInIframe = (window.top != window);
        if ($.browser.mozilla && isInIframe) {
            $('a[href^="javascript:"]').each(function () {
                var newOnClick = $(this).attr('href').replace(/^javascript:/i, '');
                var existingOnClick = this.getAttribute('onclick');
                existingOnClick = (existingOnClick ? (existingOnClick + ';') : '') + newOnClick;
                this.setAttribute('onclick', existingOnClick);
            });
        }
    });

This is a great example. I had the same problem on our Facebook app. I have just changed this section from a[href^=javascript:] to a[href^="javascript:"] and it works perfectly.

thanks Johnny! I noticed the same issue when upgrading to jquery 1.6.4! — Greg Bala, Nov 04 '11 at 14:35

GregL · Answer 3 · 2011-10-27T17:07:09.017

1

So just use jQuery to change it from a href to click() or onclick code. :-)

EDIT: try this jQuery:

$(function() { 
    var isInIframe = (window.top!=window); 
    if ($.browser.mozilla && isInIframe) {
        $('a[href^=javascript:]').each(function() { 
            var newOnClick = $(this).attr('href').replace(/^javascript:/i, ''); 
            var existingOnClick = $(this).attr('onclick'); 
            if (existingOnClick)
                newOnClick = existingOnClick + ';' + newOnClick; 
            $(this).attr('onclick', newOnClick); 
         }); 
    } 
});

It's not tested, it's not the most efficient JS, but it's all I can manage at the moment.

edited Oct 27 '11 at 17:07

answered Oct 27 '11 at 16:34

GregL

37,147
8
62
67

yea, that is one workaround but this is all ASP.NET generated code, and it only does not work in FF, and inside FB IFrame... something must be wrong with either FF or FB Iframe... :( – Greg Bala Oct 27 '11 at 16:39
Probably. But while you figure it out, do this as a temporary workaround. Only do it if the user is running firefox and is running in an iframe, so other users aren't affected. – GregL Oct 27 '11 at 16:42
thanks Greg! will try this. you would not happen to have just jquery script handy would you ? :) My JS and Jquery skills are very poor :( – Greg Bala Oct 27 '11 at 16:48
@GregBala You're a lucky man (with a great name). If my updated code works, please accept my answer - I really want to get over 1k rep! :-) – GregL Oct 27 '11 at 17:08

score 1 · Answer 4 · answered Oct 28 '11 at 04:16

GregL's idea is good. But the function isn't work for me..... My browser is firefox 7.0.1, and use jquery-ui-1.8.2.

I'd try below code

....
var existingOnClick = $(this).attr('onclick');
alert('existingOnClick');
....

In my case, it was show up function onclick(event){....click codes...}.Not only my on click code

So I fix the Code like...

$(function() { 
var isInIframe = (window.top!=window); 
if ($.browser.mozilla && isInIframe) {
    $('a[href^=javascript:]').each(function() { 
        var newOnClick = $(this).attr('href').replace(/^javascript:/i, ''); 
        var existingOnClick = this.getAttribute('onclick'); 
        existingOnClick = (existingOnClick ? (existingOnClick + ';') : '') + newOnClick ;
        this.setAttribute('onclick', existingOnClick );
     }); 
} 
});

score 0 · Answer 5 · answered Nov 02 '11 at 15:50

Also running FF 7.0.1 neither worked for me but a small change also had me on my way.

$(function () {
    var isInIframe = (window.top != window);
    if ($.browser.mozilla && isInIframe) {
        $("a").each(function () {
            var newOnClick = $("a").attr("href").replace(/javascript:/gi, '');
            var existingOnClick = this.getAttribute('onclick');
            existingOnClick = (existingOnClick ? (existingOnClick + ';') : '') + newOnClick;
            this.setAttribute('onclick', existingOnClick);
        });
    }
});

Thanks to above posters

href="javascript:..." syntax suddenly does not work in FB Iframe in FireFox

5 Answers5