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 类提供给同样具有 onclick share.tw() 的链接时，我会得到两个弹出窗口：一个加载了正确 Twitter 共享页面的浏览器窗口弹出窗口，以及一个 Fancybox jQuery 弹出窗口，它显示网站 404。

如何更改功能以使用 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 函数，通过在 img 或 href 链接中添加 class="iframe" 调用

$(".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

对于希望没有相同限制的“其他服务”（我怀疑其中一些可能），那么其他 answer further down the page from 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>

Answer 3

我看到的是window.open函数，负责打开新的浏览器窗口。这个应该去。相反，您应该设置链接的 href，例如 This go to iframe，然后调用 fancybox 函数。

我用fancybox已经有一段时间了，我更喜欢使用jquery-ui.dialog，所以我可能错了..

Answer 4

我在使用 jQuery Colorbox 插件时遇到了同样的问题。我试图在 Twitter 上分享和在 Facebook 上分享链接，这些链接会在模式框中打开。当您打开链接时，会出现模态框，但 iFrame 将是空白的，并且只会显示一个白色框。

很遗憾，这是意料之中的行为。 Twitter 分享页面和 Facebook 分享页面都有在点击链接时跳出框架的说明，因此您看到的是空白框。由于各个站点提供的内容不受您的控制，因此无法阻止。

Answer 5

正如其他人所说，在 Twitter 上是不可能的。
如果你查看 Twitter 主页的源代码，你会在 body 标签下方看到一个像这样的小脚本。

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

这意味着如果您在 iframe(self != top) 中，请拉出一个空白页。
没有变通办法。

Answer 6

也许看看http://platform.twitter.com/widgets.js，看看 Twitter 是如何创建他们的弹出窗口的，然后看看你是否可以坚持这个小部件。