Javascript和jQuery(Fancybox)问题

Question

Javascript和jQuery(Fancybox)问题

我正在使用下面的Javascript函数进行Twitter共享(以及其他服务;功能代码简化为仅针对此问题的Twitter),它抓取要共享的页面URL和标题,并在链接中调用的onclick.这导致Twitter共享页面在弹出的浏览器窗口中加载,即<img src="/images/twitter_16.png" onclick="share.tw()" />

为了与网站的其他设计方面保持一致,我希望能够做的是让Twitter共享页面不在标准浏览器窗口中打开,而是在Fancybox(jQuery)窗口中打开.

当img或href链接class="iframe"在链接和标题中的文档就绪函数中包含类(在本例中)时,Fancybox可以在iFrame中加载外部页面.

现在,当然,当我将iframe类提供给也具有的iframe类时onclick share.tw(),我得到两个弹出窗口:一个浏览器窗口弹出窗口,其中加载了正确的Twitter共享页面,以及一个显示站点404的Fancybox jQuery弹出窗口.

如何更改功能以使用Fancybox呈现Twitter共享页面？这是接近它的正确方法吗？或者有更好的方法,比如在jQuery中实现共享功能呢？

谢谢...

Javascript共享功能:

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");
    }
};

它被调用,即: <img src="/images/twitter_16.png" onclick="share.tw()" />

Fancybox函数,通过添加class="iframe"img或href链接调用

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

Answer 1

无论你如何改变你的设计,在Twitter上使用iframe都行不通.

如果您将URL http://twitter.com替换为其他任何内容,例如http://www.godaddy.com - 它将起作用.我试过以下的东西:

$('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'
  });
});

这是因为出于安全原因,Twitter使用javascript故意"打破"iframe.

因此,如果使用Twitter.com,以这种方式显示FancyBox iframe的想法是行不通的.这里有一些确认和一些想法:(例如使用来自iframe的API调用) - http://groups.google.com/group/twitter-development-talk/browse_thread/thread/b1bca9ef074086c7

对于你的"其他服务",希望没有相同的限制(我怀疑其中一些可能)然后从wajiw页面下面的另一个答案似乎是一个很好的赞美.

Answer 2

我的方法是删除 fancybox 初始化并直接从共享函数触发它：

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;
    }
};

我不确定我的语法是否正确，但类似的东西应该适合你。

另一种不同的尝试可能是使用虚拟锚点，更改其属性，然后触发单击它：

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>