Информация о настройке iframe

Question

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

Итак, в настоящее время я создаю систему, которая позволяет пользователям создавать html-страницы, которые могут включать ссылки css и js и, возможно, встроенные скрипты/стили внутри него.

Я хочу, чтобы пользователь просматривал их вывод, я изначально использовал тег div и добавлял к нему вывод html, но поскольку все дополнительные стили и скрипты также влияли на родительскую страницу, я решил, что единственным вариантом, вероятно, было бы использовать iframe для размещения содержимого.

Чтобы остановить ссылки на загрузочные ссылки и конфликты JQuery с родительским элементом, мне нужно запустить iframe в среде песочницы из того, что я знаю, но я не знаю, как установить содержимое iframe, когда он находится в режиме песочницы.

Если вы попробуете: -

$("example iframe element").contents().find("body").html("example html inline styles etc");

это не работает и блокирует доступ в связи с IFrame будучи песочнице и не допуская происхождения.

Песочница iframe, кажется, единственный способ остановить несколько экземпляров Jquery «один на родительском и один в iframe» от конфликта, я попытался noConflict, который, кажется, работает, но это не устраняет конфликтующие множественные загрузочные файлы, загружается в родительский и iframe элементы.

Кто-нибудь знает, как добавить контент во время выполнения в iframe, который изолирован без использования заблокированного доступа или другого уникального подхода к контейнерам, который я могу использовать?

Я ценю любую помощь или руководство, которые могли бы дать на это, так как я не могу найти много информации об этом.

Answer 1

Я наконец выяснил, в чем проблема с этой ситуацией, мне не нужен изолированный iframe, поскольку теперь я знаю, почему Jquery и Bootstrap противоречат друг другу, не имея изолировать iframe. Я вижу много сообщений, в которых вам следует использовать что-то вроде кода ниже для размещения контента в iframe.

$("example iframe element").contents().find("body").html("example html inline styles etc"); 

проблема с описанным выше способом является то, что его открытия IFRAME для размещения контента внутри него, но его не указав закрытие фрейма.

Вот почему даже на нормальном небезопасном случае iframe Jquery и Bootstrap конфликтуют, потому что он течет обратно на родительскую страницу, не закрываясь. Настоящий метод непосредственного размещения контента в iframe должен быть приведен ниже, поскольку он обеспечивает надлежащее закрытие соединения.

var myIframe = document.getElementById("ID OF THE IFRAME") 
var iframeDoc = myIframe.contentWindow.document; 
iframeDoc.open(); 
iframeDoc.write("HTML HERE"); 
iframeDoc.close(); 

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

Я надеюсь, что этот ответ поможет сэкономить время для тех, кто сталкивается с этой конкретной проблемой с помощью iframes и добавляет контент во время выполнения, используя неправильный метод.