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都无法正常工作。

如果您将网址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函数，负责打开新的浏览器窗口。这应该去。相反，你应该设置像这样转到iframe的链接的href，然后调用fancybox函数。

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

Answer 4

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

不幸的是，这是预期的行为。 Twitter共享页面和Facebook共享页面都有指示在链接被跟踪时突破框架，从而显示您正在看到的空白框。由于各个站点提供的内容不在您的控制范围内，因此无法阻止此操作。

Answer 5

正如其他人所说，推特不可能如果你查看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（自我！=顶部），请拉出空白页没有可行的解决方法。

Answer 6

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

Javascript和jQuery（Fancybox）问题

6 个答案: