Указание содержимого iframe вместо атрибута src для страницы

88

В настоящее время я работаю над формой, которая включает несколько файлов для загрузки изображений. Для onchange()этих входов существует событие, которое отправляет изображения в iframe, а затем динамически загружает загруженные изображения в форму с полями, которые необходимо изменить для них (например, имя и геолокация ).

Поскольку я не могу вкладывать формы, они file_inputтакже содержатся в файле iframe. В конце концов, я использую iframeвнутри другого iframe. Так у меня что-то вроде этого:

<form>
<!-- LOTS OF FIELDS!! -->
<iframe src="file_input_url">
<!-- iframe which loads a page of a form with a file input-->
</iframe>
</form>

и HTML загружается в iframeэто что - то вроде ( за исключением html, headи bodyметки)

<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>

Это отлично работает, за исключением того факта, что загрузка первой занимает пару секунд iframe, поэтому входной файл не загружается вместе с остальной частью страницы. Визуально это не идеально. Я мог бы решить эту проблему, если бы мог указать iframeконтент без необходимости загружать другую страницу (указанную file_input_urlв первой iframe).

Есть ли способ указать iframeсодержимое в том же документе или его можно указать только с помощью srcатрибута, требующего загрузки другой страницы?

html iframe

— орлокс
источник

Загрузка этого iframe не должна занимать «пару секунд». Я ожидал, что это будет больше похоже на десятую миллисекунды плюс «время, чтобы укусить» (которое также должно быть миллисекундами). Вы должны выяснить, что вызывает все задержки - возможно, что-то не так с вашим сервером.

— Абхи Бекерт,

95

Вы можете .write()поместить содержимое в документ iframe. Пример:

<iframe id="FileFrame" src="about:blank"></iframe>

<script type="text/javascript">
   var doc = document.getElementById('FileFrame').contentWindow.document;
   doc.open();
   doc.write('<html><head><title></title></head><body>Hello world.</body></html>');
   doc.close();
</script>

— Гуффа
источник

1

Однако, если подумать об этой возможности, html, который должен быть загружен в iframe, является сложным, и обработка его полностью в javascript, чтобы записать его в iframe, слишком сильно заслонит реализацию (вплоть до того момента, когда я предпочитаю оставьте как есть).

— orlox

2

@orlox: получите контент с сервера с помощью Ajax и введите его. Если вы не хотите идти по этому пути, создайте скрытый divэлемент со своим содержимым и поместите его содержимое iframeмежду <body>и </body>.

— stackular

11

Чем больше я узнаю об ограничениях iframe, тем больше я их ненавижу

— Джон Магнолия

1

Как избежать одинарных кавычек с помощью этого метода? Некоторые из них важны для HTML (например, class = 'example'), некоторые из них важны для CSS (например, font-family: 'Verdana';), а некоторые - для содержимого (например, Джордж О'Мэлли).

— Дэн Бечард

2

@Dan: чтобы избежать любого значения, которое будет использоваться в строке JavaScript, разделенной апострофом, вы сначала избегаете обратную косую черту, а затем апострофы. Например , с помощью C # для вывода строки в коде: doc.write('<%= html.Replace("\\", "\\\\").Replace("'", "\\'") %>');.

— Guffa

36

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

— Аюш Гупта
источник

2

IE не поддерживает это право, но вы можете проверить последний статус на caniuse .

— Аюш Гупта

Документация по MDN

— Бенуа Бланшон

22

Вы можете использовать data:URL в src:

var html = 'Hello from <img src="http://stackoverflow.com/favicon.ico" alt="SO">';
var iframe = document.querySelector('iframe');
iframe.src = 'data:text/html,' + encodeURIComponent(html);

<iframe></iframe>

Развернуть фрагмент

Разница между srcdoc = «…» и src = «data: text / html,…» в iframe .

Преобразование HTML в ссылку data: text / html с помощью JavaScript .

— пользователь
источник

1

Вам даже не нужен какой-либо JavaScript: srcатрибут можно указать в строке, если он экранирован, например, используя rawurlencodeв PHP:<iframe src="<?php echo htmlspecialchars('data:text/html,' . rawurlencode($content)); ?>"></iframe>

— Джейк,

Microsoft добавила поддержку для этого почти одновременно с добавлением поддержки srcdoc, и srcdocэто лучший способ сделать это. URL-адреса данных широко поддерживаются только для изображений и CSS - насколько мне известно, ни одна версия Internet Explorer не поддерживает их в iframe.

— Абхи Бекерт,

6

В сочетании с тем, что описал Гуффа, вы можете использовать технику, описанную в Разъяснении <script type = "text / template"> ... </script>, чтобы сохранить документ HTML в специальном scriptэлементе (см. Ссылку для объяснения как это работает). Это намного проще, чем хранить HTML-документ в строке.

— ксимо
источник

Если подумать, это не сработает для полного HTML-документа. Метки , такие как <html>, <body>, <script>будет только запутать браузер, нарушая визуализацию документа.

— ximo

Это не проблема, теги HTML внутри скриптов игнорируются.

— HBP

Вы правы :) Я еще не пробовал эту технику, когда писал это, и, должно быть, откуда-то почерпнул это предположение. Позже я узнал, что все, что находится в <script>теге, игнорируется браузером .. Спасибо, что исправили меня!

— ximo