2010-11-16 6 views
59

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

<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, головы и тела)

<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, поэтому требуется загрузка другой страницы?

ответ

68

Вы можете написать контент в документе 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' между '' и' '. – stackular

+7

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

3

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

+0

С другой стороны, это не очень хорошо работает для полного HTML-документа. Такие теги, как '', '', '