Указание содержимого iframe вместо ссылки на страницу - PullRequest
74 голосов
/ 17 ноября 2010

В настоящее время я работаю с формой, которая помимо всех обычных полей формы также имеет входные данные для загрузки изображений, которые 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, поэтому требуется загрузка другой страницы?

Ответы [ 4 ]

83 голосов
/ 17 ноября 2010

Вы можете записать содержимое в документ 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>
30 голосов
/ 28 августа 2015

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

15 голосов
/ 09 июля 2017

Вы можете использовать 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,…» в фрейме .

Преобразование HTML в данные: текстовая / HTML-ссылка с использованием JavaScript .

5 голосов
/ 16 сентября 2011

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...