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