我创建了一个完全可定制的音频播放器小部件，目的是让人们可以通过包含如下<iframe>标签将其嵌入到他们的博客文章（例如 wordpress）中：
<iframe id=“my_widget” width="800px" height="100%" scrolling="no" frameborder="no" allow="autoplay" src="http://mywebsite.com/player?audio_id=xxxxxxx">
</iframe>
该小部件包括几个按钮，用于将文章分享到 facebook、twitter 以及将博客 url 复制到剪贴板。当我通过将它嵌入到我网站的页面中来测试我的小部件时，所有按钮都按预期工作。但是，当我在 wordpress 帖子中嵌入小部件时，单击共享按钮会出现以下 javascript 错误：
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 以共享帖子的逻辑（在我的小部件代码中）如下所示：
<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>
我知道这个 javascript 错误告诉我我的重定向尝试被同源策略阻止。但我肯定看到其他 iframe 小部件做我想做的事情。这里的正确行动方针是什么？我似乎无法弄清楚其他人是如何做到这一点的。
谢谢你的建议 Jimmy Leahy，我不知道window.open(). 这部分解决了我的问题。经过更多的研究，我发现了document.referrer(). location.href从 iframe访问被同源策略阻止，但document.referrer()不是。这个函数将返回调用 iframe 的 url，它最终成为父 url。这是我如何实施我的解决方案。
<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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句