Указание содержимого 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