Установка атрибута iFrame src в качестве URI кодированных данных с использованием JavaScript в Chrome

Question

Я пытаюсь закодировать iFrame в качестве тестовой области в HTML / Javascript / CSS IDE в браузере Chrome, но теряю большую функциональность из-за определенных ошибок, и мне было интересно, может ли кто-нибудьподскажите, как задать для атрибута .src iFrame URL-адрес с HTML-кодом JavaScript Javascript и т. д., закодированным непосредственно в атрибуте .src.Не говорите мне, что это не может быть сделано, потому что я знаю, что это возможно, я только что потерял веб-страницу, где я нашел этот метод.Кроме того, как примечание, можно ли программно принудительно обновить этот iFrame?

Спасибо за ваше время,

Крис

Answer 1

Из моего исследования видно, что это считается угрозой безопасности и поэтому запрещено во всех браузерах.

Ссылка на сайт MS IE выдержка:

URI данных поддерживаются только для следующих элементов и / или атрибутов.

• объект (только изображения)
• img
• тип ввода = изображение
• ссылка
• CSS-объявления, которые принимают URL, такие как background, backgroundImage и т. Д.

HTML5 Security Cheatsheet: http://html5sec.org/

Answer 2

iframeEl.src = "data: text / html; charset = utf-8," + content;

Answer 3

Да, это можно сделать - см. http://sparecycles.wordpress.com/2012/03/08/inject-content-into-a-new-iframe/

Обратите внимание, что iframe будет иметь то же происхождение, что и исходная страница, что может быть нежелательным и может иметь серьезные соображения безопасности в зависимости от того, что вы делаете.

Пример использования техники javascript: схема приведен здесь: http://jsbin.com/uhenuz/4 (При использовании с https потребуется дополнительное прибегание к поиску и хорошее тестирование, чтобы проверить, что смешанное предупреждение https / http никогда не может появиться.)

Answer 4

Вместо этого используйте атрибут srcdoc, в него можно просто вставить необработанный HTML-код.

Демо

<iframe srcdoc="<h1>HELLO</h1>"></iframe>
<iframe id="dynamic"></iframe>
<script>document.getElementById('dynamic').srcdoc = '<i>there</i>';</script>

Работает ввсе, кроме браузеров MS.
Используйте sandbox, чтобы сделать его более безопасным.

Answer 5

Обновить iframe:

document.getElementById('iframeid').src = document.getElementById('iframeid').src