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

Question

我创建了一个完全可定制的音频播放器小部件，目的是让人们可以通过包含 <iframe> 标签将其嵌入到他们的博客 post 中（例如 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 post 中时，单击共享按钮会出现此 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 以共享 post（在我的小部件代码中）的逻辑如下所示：

<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 小部件执行我正在尝试执行的操作。这里的正确做法是什么？我似乎无法弄清楚其他人是如何做到这一点的。

Answer 1

感谢 Jimmy Leahy 的建议，我不知道 window.open()。这部分解决了我的问题。经过更多研究后，我发现 document.referrer()。从 iframe 访问 location.href 会被同源策略阻止，但 document.referrer() 不会。此函数将 return 调用 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>

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

How do I redirect user to another page from clicking a button that's in an iframe

html

javascript

embed

iframe