Как перенаправить пользователя на другую страницу, нажав кнопку в фрейме - PullRequest
Новая
       37

Как перенаправить пользователя на другую страницу, нажав кнопку в фрейме

0 голосов
/ 01 апреля 2019

Я создал полностью настраиваемый виджет аудиоплеера с намерением, чтобы люди могли встраивать его в свои записи в блоге (например, WordPress), добавив тег <iframe>, например: 

<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 делают то, что я пытаюсь сделать.Каков правильный курс действий здесь?Я не могу понять, как все это делают.

1 Ответ

0 голосов
/ 02 апреля 2019

Спасибо за предложение, Джимми Лихи, я не знал о window.open().Это частично решило мою проблему.После еще одного исследования я обнаружил document.referrer().Доступ к location.href из iframe заблокирован политикой того же происхождения, но document.referrer() - нет.Эта функция вернет URL, который вызвал iframe, который в конечном итоге является родительским 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>
...