Pregunta de Javascript y jQuery (Fancybox)

Pregunta de Javascript y jQuery (Fancybox)

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, i.e.<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?

Gracias...

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, i.e.: <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'
});

preguntado el 08 de enero de 11 a las 16:01

6 Respuestas

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>

Respondido el 12 de enero de 11 a las 05:01

Thanks, that's close. What I get now is a fullsize, blank Fancybox window. But I don't know how to trap errors. The JS profiler in Safari's developer's tools doesn't show any errors.... - reconocimiento

I would switch to using Firebug on Firefox. I haven't found anything better. Another thing to try may be to use a dummy anchor, alter it's attributes and call click on it. I'll update my answer to show an example. - wajiw

Also, what size did you want it to be? Just change the height/width attributes if you don't want it fullsize. - wajiw

+1 I think with my comment about the issues with Twitter and the 1st solution you've given here - which the questioner can use for the "other services" that hopefully don't have the same restrictions, then I think we have a comprehensive answer (I say your "1st solution" because that's the one I think is the better of the two :-)) - PandaWood

@wajiw: thanks for the code snips, which are useful. I see how to change the fancybox size, but it's not really an issue. I'm looking into some workarounds, like grabbing the twitter page with curl and stripping the frame breaking JS, or pulling the twitter source from local and passing the page name and URL to it. - reconocimiento

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.

contestado el 23 de mayo de 17 a las 14:05

+1 very true indeed.. i have provided explanation on my post below - naveen

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 ..

Respondido el 08 de enero de 11 a las 22:01

Thanks, I may try jquery-dialog if I can't use Fancybox for this. - reconocimiento

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.

Respondido el 12 de enero de 11 a las 05:01

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.

Respondido el 17 de enero de 11 a las 15:01

Perhaps take a look at http://platform.twitter.com/widgets.js and see how Twitter creates their popup, then figured out if you could stick that incide a widget.

Respondido 09 ago 11, 19:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.