我创建了一个完全可定制的音频播放器小部件,目的是让人们可以通过包含如下<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] 删除。
我来说两句