Question

更新我使用https://github.com/kennethreitz/flask-sslify/修复了https和http协议不匹配错误，但我仍然收到此错误：

Uncaught SecurityError：无法从'HTMLIFrameElement'中读取'contentDocument'属性：阻止具有原点“https://infinite-brushlands-3960.herokuapp.com”的框架访问具有原点“https://www.facebook.com”的框架。被访问的帧将“document.domain”设置为“facebook.com”，但请求访问的帧没有。两者都必须将“document.domain”设置为相同的值以允许访问。

错误消息对于chrome是唯一的，但是弹出消息的行为与调试器中显示的内容不匹配在所有浏览器中都是一致的。

我正在尝试获取我的网站的Facebook分享按钮插件，以提示用户具有正确的共享窗口属性。我的网站上有一个按钮（我目前正在使用的暂存版本可以在这里找到：http://infinite-brushlands-3960.herokuapp.com/），上面写着“共享此计划”，点击后，会生成一个独特的共享按钮。

这是我需要的FB javascript SDK的代码，它按照指示放在开始的body标签之后：

<script>
    window.fbAsyncInit = function() {
        FB.init({
            appId      : 'myAppIDGoesHere',
            xfbml      : true,
            version    : 'v2.5'
        });
    };

    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>

以下是“分享此计划”按钮的代码：

// When 'Share This Schedule' is clicked:
$('#share_schedule').click(function(){
    html2canvas(document.body).then(function(canvas) {
        //document.body.appendChild(canvas);
        var imgDataUrl = canvas.toDataURL();
        $('head').append("<meta property='og:image' content='" + imgDataUrl + "' />");
    });

    // If it is not the first time being clicked:
    if ($('#share_url_ul').children().length >= 1){
        $('#share_url_ul').empty();
    }
    $.ajax({
        method: "POST",
        url: "/share/",
        data: JSON.stringify(localStorage),
        contentType: "application/json; charset=utf-8",
        dataType: "text",
        success: function(response){
            var shared_url = document.createElement('a');
            $(shared_url).css('display', 'block');
            $(shared_url).attr('href', window.location.href + 'shared/' + response);
            $(shared_url).attr('id', 'share_link');
            shared_url.innerHTML = window.location.href + 'shared/' + response;
            $('#share_url_ul').append(shared_url);

            $('#fb_share_btn').attr('data-href', window.location.href + 'shared/' + response);

            FB.XFBML.parse();
        },
        error: function(error){
            console.log(error);
        }
    });
});

我的HTML：

<head>
  .
  .
  .
    <!-- Facebook -->
    <meta property="og:url"                content="http://infinite-brushlands-3960.herokuapp.com/" />
    <meta property="og:type"               content="website" />
    <meta property="og:title"              content="My Schedule on Serif" />
</head>

当我按照URL Debugger的指示前往this article时，我会看到我想看到的内容，并提供正确的提示属性：

但在实际网站上，这不是我看到的：

为什么存在这种差异？

其他信息：

我有一种感觉，这可能与我在加载控制台中收到此消息的事实有关：

Uncaught SecurityError：无法从'HTMLIFrameElement'中读取'contentDocument'属性：阻止具有原点“http://infinite-brushlands-3960.herokuapp.com”的框架访问具有原点“https://www.facebook.com”的框架。请求访问的帧具有“http”协议，被访问的帧具有“https”协议。协议必须匹配。

我也尝试使用FB.ui Share Dialog而不是共享插件，但它只是打开一个弹出窗口，其中包含上述错误。

Answer 1

如果我正确理解您的用例，您希望单独分享每个时间表，对吧？

目前，og:url值指向您的主站点（https://infinite-brushlands-3960.herokuapp.com/）。这将导致Open Graph scraper（和Share对话框抓取）跟随该url，因为它被认为是规范URL。我建议在那里使用每个时间表的网址。

将此与manual rescrapes相结合，您的Open Graph数据应始终保持最新。

Facebook分享对话框未显示正确的内容

1 个答案: