Question

我创建了一个完全可自定义的音频播放器小部件，目的是使人们可以通过添加<iframe id=“my_widget” width="800px" height="100%" scrolling="no" frameborder="no" allow="autoplay" src="http://mywebsite.com/player?audio_id=xxxxxxx"> </iframe>标签将其嵌入其博客文章（例如wordpress）中：

Uncaught DOMException: Blocked a frame with origin "http://mywebsite.com" from accessing a cross-origin frame.
at shareFacebook (http://mywebsite.com/player?audio_id=xxxxxxx:172:46)
at HTMLButtonElement.onclick (http://mywebsite.com/player?audio_id=xxxxxxx:38:123)

该小部件包括一些按钮，用于将文章共享到Facebook，Twitter，以及将博客URL复制到剪贴板。当我通过将小部件嵌入到我网站上的页面中来对其进行测试时，所有按钮均按预期工作。但是，当我将小部件嵌入wordpress帖子中时，单击共享按钮会显示此javascript错误：

<button class="share-fb-button-sm" onclick="shareFacebook();">

<script>
    function shareFacebook() {
        var currentURL = window.top.location.href;
        window.top.location.href = "https://www.facebook.com/sharer/sharer.php?u=" + currentURL;
    }
</script>

我将用户重定向到Facebook以共享帖子的逻辑（在我的小部件代码中）如下：

index=cdapp ("ERROR" OR "WARNING") AND (host=prod-delivery* OR host=prod-microsvc*) | search NOT "https-jsse-nio-8443-exec" NOT GetResourceBundleTag NOT AH01630 NOT AH01276 NOT "*multimedia/images*" NOT "*/error/*" NOT "*-error-*" NOT "*_error" NOT "*error/404.jsp" NOT "/error.php" NOT "/error_page.htm"  NOT "error=webacc" NOT "*MessageType=Error*" NOT "*/warning*"  NOT "(no description)" | table _time,host,source,_raw

我了解到此JavaScript错误告诉我，我的重定向尝试已被“同源策略”阻止。但我肯定已经看到其他iframe小部件可以做我想做的事情。这里的正确做法是什么？我似乎无法弄清楚其他人是怎么做到的。

Answer 1

感谢您的建议，吉米·莱希（Jimmy Leahy），我对window.open()一无所知。这部分解决了我的问题。经过更多研究后，我发现了document.referrer()。从iframe访问location.href受同源策略限制，但document.referrer()不受限制。此函数将返回称为iframe的网址，该网址最终成为父网址。这是我实施解决方案的方式。

<button class="share-fb-button-sm" onclick="shareFacebook();">

<script>
    function shareFacebook() {
        var currentURL = document.referrer;
        window.open("https://www.facebook.com/sharer/sharer.php?u=" + currentURL);
    }
</script>

如何通过单击iframe中的按钮将用户重定向到另一页

1 个答案: