Блог

Главная - Вопросы по программированию - Невозможно внедрить jquery в iframe

Невозможно внедрить jquery в iframe

#javascript #jquery

#javascript #jquery

Вопрос:

у меня возникли проблемы с внедрением jQuery в iframe. С обычным javascript это работает так, как задумано, но не с jQuery.

Я добавил ссылку jQuery CDN к iframes <head> , и если я проверю элемент iframe, я смогу увидеть его там. Я также могу видеть скрипты в теге body после запуска функции.

При выполнении скрипта jquery я получаю эту ошибку.

 Uncaught ReferenceError: $ is not defined

Если я добавлю их, я не получу сообщение об ошибке, но ничего не произойдет.

 $iframe[0].contentWindow.$ = $;
$iframe[0].contentWindow.jQuery = $;

Я попытался добавить тайм-ауты в функцию добавления, чтобы проверить, не было ли проблемы с недостаточно быстрой загрузкой CDN. Но никакой разницы.

Если я помещаю HTML и jQuery за пределы iframe, все работает так, как задумано, поэтому я думаю, что я что-то сделал неправильно или пропустил в отношении iframe. У кого-нибудь есть идеи, что я мог здесь сделать не так?

Это функция, которая вводит скрипты

 injectScript() {
    let $iframe = $('#iframe');
    $iframe.ready(function () {
      $iframe[0].contentWindow.$ = $;
      $iframe[0].contentWindow.jQuery = $;

      const jqueryScript = document.createElement("script");
      jqueryScript.type = "text/javascript";
      jqueryScript.src = "https://code.jquery.com/jquery-3.5.1.min.js"
      $iframe.contents().find("head").append(jqueryScript);

      // This code works
      let vanilla = "<script>document.getElementById('vanilla').innerHTML = 'bar'<";
      vanilla  = "/script>";
      $iframe.contents().find("body").append(vanilla);

      // This code works **not**
      let jQuery = "<script>$('#jquery').text('foo')<";
      jQuery  = "/script>";
      $iframe.contents().find("body").append(jQuery);

    })
  }

html-код в iframe

  <div id="jquery">foo</div>
 <div id="vanilla">foo</div>

Комментарии:

1. Вы не можете получить доступ к dom iframe, если он не находится в том же домене, что и ваш текущий сайт, по очевидным соображениям безопасности

2. Да, но они находятся в одном домене? Как я могу это проверить? И почему тогда он работает с обычным JS, но не с jQuery?

3. Почему бы вам вместо внедрения просто не добавить скрипт в HTML-код iframe?

4. Это случай, когда мы хотим отображать модули / компоненты разных размеров после того, как пользователь взаимодействовал с iframe. Компоненты зависят от jquery для анимации и других вещей.

5. Я не уверен, что понимаю. Почему бы просто не включить jquery в HTML-код iframe заранее, а затем обрабатывать взаимодействие и анимацию из javascript iframe