Javascript and jQuery (Fancybox) question

Question

Javascript and jQuery (Fancybox) question

I'm using the Javascript function below for Twitter sharing (as well as other services; the function code is simplified to just Twitter for this question) that grabs the to-be-shared page URL and title and it is invoked in the link with onclick. That results in the Twitter share page loading in a pop up browser window, ie <img src="/images/twitter_16.png" onclick="share.tw()" />

In order to be consistent with other design aspects of the site, what I'd like to be able to do is have the Twitter share page open not in a standard browser window but in a Fancybox (jQuery) window.

Fancybox can load an external page in an iFrame when the img or href link contains a class (in this case class="iframe" ) in the link and in the document ready function in the header.

Right now, of course, when I give the iframe class to the link that also has the onclick share.tw() , I get two popups: one browser window popup with the correct Twitter share page loaded, and a Fancybox jQuery popup that shows a site 404.

How can I change the function to use Fancybox to present the Twitter share page? Is that a correct way to approach it? Or is there a better way, such as implementing the share function in jQuery, too?

Thanks...

Javascript share function:

var share = {
   tw:function(title,url) {
        this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url);
    },
    share:function(tpl,title,url) {
        if(!url) url = encodeURIComponent(window.location);
        if(!title) title = encodeURIComponent(document.title);

        tpl = tpl.replace("##URL##",url);
        tpl = tpl.replace("##TITLE##",title);

        window.open(tpl,"sharewindow"+tpl.substr(6,15),"width=640,height=480");
    }
};

It is invoked, ie: <img src="/images/twitter_16.png" onclick="share.tw()" />

Fancybox function, invoked by adding class="iframe" in the img or href link

$(".iframe").fancybox({
'width' : '100%',
'height' : '100%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});

Answer 1

No matter how you change your design, using an iframe with Twitter isn't going to work.

If you replace the URL http://twitter.com with anything else eg http://www.godaddy.com - it will work. I tried something like below:

$('h1').click(function(e) {
  $.fancybox({
    href : 'http://www.godaddy.com', // http://twitter.com will not work here
    title : 'twitter window',
    width : 640,
    height : 480,
    type : 'iframe'
  });
});

This is because Twitter uses javascript to "break" iframes on purpose for security reasons.

So your idea of showing a FancyBox iframe in this way cannot work if using Twitter.com. There is confirmation of this and some ideas on getting around it here: (like using API calls from an iframe) - http://groups.google.com/group/twitter-development-talk/browse_thread/thread/b1bca9ef074086c7

For your "other services" that hopefully don't have the same restrictions (I suspect some of them might) then the other answer further down the page from wajiw seems a good compliment.

Answer 2

My approach would be to remove the fancybox initialization and trigger it directly from your share function:

var share = {
   tw:function(title,url) {
        this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url);
    },
    share:function(tpl,title,url) {
        if(!url) url = encodeURIComponent(window.location);
        if(!title) title = encodeURIComponent(document.title);

        tpl = tpl.replace("##URL##",url);
        tpl = tpl.replace("##TITLE##",title);


        $.fancybox({
                        'href' : tpl,
                        'title' : title,
                        'width' : '100%',
                        'height' : '100%',
                        'autoScale' : false,
                        'transitionIn' : 'none',
                        'transitionOut' : 'none',
                        'type' : 'iframe'
                        });

        return false;
    }
};

I'm not sure my syntax is correct, but something like that should work for you.

Another different attempt may be to use a dummy anchor, alter it's attributes, and trigger click on it:

jQuery(document).ready(function() {

        $("#dummyLink").fancybox({
                        'width' : '100%',
                        'height' : '100%',
                        'autoScale' : false,
                        'transitionIn' : 'none',
                        'transitionOut' : 'none',
                        'type' : 'iframe'
                        });

        return false;
    }
  };
});
var share = {
   tw:function(title,url) {
        this.share('http://twitter.com/home?status=##URL##+##TITLE##',title,url);
    },
    share:function(tpl,title,url) {
        if(!url) url = encodeURIComponent(window.location);
        if(!title) title = encodeURIComponent(document.title);

        tpl = tpl.replace("##URL##",url);
        tpl = tpl.replace("##TITLE##",title);

        $("#dummyLink").attr('href', tpl);
        $("#dummyLink").attr('title', title);
        $("#dummyLink").trigger('click');
        return false;
    }
};

HTML:

 <a href="#" title="" id="dummyLink" style="display:none;"></a>

Answer 3

What I see is that the window.open function, is responsible for opening the new browser window. This one should go. Instead you should be setting the href of a link like This goes to iframe, and then invoke the fancybox function.

It's been a while since I've used fancybox, I prefer using jquery-ui.dialog, so I could be wrong ..

Answer 4

I've run into this same exact issue using the jQuery Colorbox plugin. I was trying to make Share on Twitter and Share on Facebook links that would open up in the modal box. When you would open the links, the modal box would appear, however the iFrame would be blank and only a white box would be displayed.

Unfortunately, this is expected behavior. Both the Twitter sharing page and the Facebook sharing pages have instructions to break out of the frame when the link is followed, thus the blank box you're seeing. Since the content that is being delivered by the respective sites are not under your control, there is no way to stop this.

Answer 5

Its impossible with twitter as others noted.
If you View Source of Twitter homepage, you will see a small script like this just below the body tag.

<script>
    if (window.top !== window.self) {
        document.write = "";
        window.top.location = window.self.location;
        setTimeout(function() {
            document.body.innerHTML = ""
        }, 1);
        window.self.onload = function() {
            document.body.innerHTML = ""
        }
    };
</script>

Which means if you are in an iframe(self != top), pull out a blank page.
No workarounds are possible.

Answer 6

也许看看http://platform.twitter.com/widgets.js ，看看Twitter如何创建弹出窗口，然后弄清楚是否可以坚持使用小部件。