В настоящее время я работаю над формой, которая включает несколько файлов для загрузки изображений. Для 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
атрибута, требующего загрузки другой страницы?
Ответы:
Вы можете
.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>
источник
div
элемент со своим содержимым и поместите его содержимоеiframe
между<body>
и</body>
.doc.write('<%= html.Replace("\\", "\\\\").Replace("'", "\\'") %>');
.iframe теперь поддерживает srcdoc, который можно использовать для указания HTML-содержимого страницы, отображаемого во встроенном фрейме.
источник
Вы можете использовать
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 .
источник
src
атрибут можно указать в строке, если он экранирован, например, используяrawurlencode
в PHP:<iframe src="<?php echo htmlspecialchars('data:text/html,' . rawurlencode($content)); ?>"></iframe>
srcdoc
, иsrcdoc
это лучший способ сделать это. URL-адреса данных широко поддерживаются только для изображений и CSS - насколько мне известно, ни одна версия Internet Explorer не поддерживает их в iframe.В сочетании с тем, что описал Гуффа, вы можете использовать технику, описанную в Разъяснении <script type = "text / template"> ... </script>, чтобы сохранить документ HTML в специальном
script
элементе (см. Ссылку для объяснения как это работает). Это намного проще, чем хранить HTML-документ в строке.источник
<html>
,<body>
,<script>
будет только запутать браузер, нарушая визуализацию документа.<script>
теге, игнорируется браузером .. Спасибо, что исправили меня!