К началу страницы из iFrame - перекрестный домен

В надежде, что я не пропустил решение здесь на SO, но я вытягивал свои волосы, пытаясь понять, что я делаю неправильно, и надеюсь, что кто-то сможет увидеть, что это такое , Вот конфигурация:К началу страницы из iFrame - перекрестный домен

У меня есть страница, которая подается на DOMAIN1.COM. По большей части это форма с кнопкой отправки и множеством jQuery. Форма может быть длинной, поэтому пользователю необходимо прокрутить страницу вниз до полей формы ввода. Кнопка отправки находится внизу этой формы, а выходные результаты находятся в верхней части формы. Когда пользователь нажимает кнопку отправки, он/она не может видеть результаты, потому что они находятся вне верхней части страницы. То, что я хочу сделать, это использовать jQuery scrollTo() для позиционирования в верхней части страницы после нажатия кнопки отправки.

Проблема заключается в том, что страница выше (и кнопка отправки) находится внутри iFrame на DOMAIN2.COM, и поэтому, когда нажата кнопка отправки, у меня есть ситуация с перекрестным доменом, которую мне нужно преодолеть.

Я задал вопрос here, но мой вопрос был не совсем точным. Поток превратился в полезную информацию и указал мне на script, который использует jQuery postMessage() для связи с перекрестным доменом, но у меня возникла проблема с реализацией предлагаемого решения. Вот мой код:

DOMAIN1.COM (ребенок):

<html> 
    <head> 
     <!-- Load jquery --> 
     <script type="text/javascript" src="./jquery-2.0.3.min.js"></script> 

     <!-- Cross-domain scripting goodness (scroll to top) --> 
     <script type="text/javascript" src="./jquery.ba-postmessage.js"></script> 

     <script type="text/javascript"> 
      // EVENT Handler - Form Submission 
      $(function() { 
       $("#btnSubmit").bind('click', function (event) { 
        // Get the parent page URL as it was passed in, 
        // for browsers that don't support window.postMessage 
        var parent_url = decodeURIComponent(document.location); 
        window.postMessage("scrollTop", parent_url, parent); 
       }); 
      }); 
     </script> 
    </head> 

    <body> 
     <form> 
      ... Lots of form fields resulting in vertical height ... 
      <input type="submit" id="btnSubmit" value="Submit" /> 
     </form> 
    </body> 
</html>

DOMAIN2.COM (родитель):

<html> 
    <head> 
     <!-- Load jquery --> 
     <script type="text/javascript" src="./jquery-2.0.3.min.js"></script> 

     <!-- Cross-domain scripting goodness (scroll to top) --> 
     <script type="text/javascript" src="./jquery.ba-postmessage.js"></script> 

     <script type="text/javascript"> 
      // Cross-domain - scroll window to top 
      window.addEventListener("message", receiveMessage, false); 

      function receiveMessage(event) { 
       if (event.data == "scrollTop") { 
        window.scrollTo(0, 0); 
       } 
      } 
     </script> 
    </head> 

    <body> 
     <iframe src="http://domain1.com/index.html"></iframe> 
    </body> 
</html>

Запуск обеих страниц выше на том же домене, обеспечивает желаемые результаты - нажатие кнопки отправки прокручивает страницу вверх.

Запуск на отдельных доменах, как документированные и закодированные выше, страница не прокручивается вверх, мои выходные результаты не получится, и Jquery выводит сообщение об ошибке в Firebug:

DataCloneError: The object could not be cloned.

Если изменить код, чтобы выйти из параметра parent на странице на domain1.com как:

var parent_url = decodeURIComponent(document.location); 
window.postMessage("scrollTop", parent_url);  //, parent);

Тогда ничего не происходит вообще, и никакие ошибки не выводятся. Не похоже, что receiveMessage() на DOMAIN2.COM вызывается вообще.

Может ли кто-нибудь увидеть, что я могу делать неправильно, чтобы этот код не работал с перекрестным доменом?

источник

2014-01-23 rwkiii

Это будет много работы, и это, вероятно, никогда не будет работать должным образом, просто включите форму на первой странице и опустите iFrame, и все ваши проблемы будут решены. – adeneo

Страница на DOMAIN1.COM обращается к ASP Web API в том же домене. Запуск их обоих в одном домене разрешает проблему перекрестного домена в этом смысле. Страница на DOMAIN2.COM работает на сайте Wordpress - Linux/PHP. Если я переведу страницу с DOMAIN1.COM на DOMAIN2.COM, я могу, конечно, преодолеть эту конкретную проблему (опубликовано), но затем у меня есть проблема с перекрестным доменом с помощью ASP Web API. Я попытался решить это на ранней стадии, но столкнулся с проблемами, которые мне не удалось выяснить. : S – rwkiii

Я думаю, что это очень поздно, но для других это может сработать.

Вы почти находитесь; Вы должны использовать

window.postMessage("scrollTop","#domain of parent page exact page");

Вместо того, чтобы фрагмент кода:

window.postMessage("scrollTop", parent_url, parent);

Если в момент события запланирован к отправке на схему, имя хоста или порт документа otherWindow не совпадает, что при условии в targetOrigin событие не будет отправлено Dom. Прочтите documentation здесь

На главной странице используйте следующий фрагмент кода.

window.addEventListener("message", receiveMessage, false); 
function receiveMessage(event) 
{ 
    if (event.origin !== "#domain of iframe") 
    return; 
    if (event.data == "scrollTop"){ 
    window.scrollTo(0,0); 
    } 
}

источник

2017-07-03 06:22:50 amitdeol

К началу страницы из iFrame - перекрестный домен

ответ

Смежные вопросы