Вказівка вмісту 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

Чим більше я дізнаюся про обмеження фреймів, тим більше їх ненавиджу

— Джон Магнолія

1

Як уникнути одинарних лапок за допомогою цього методу? Деякі з них мають значення HTML (наприклад, class = 'example'), інші мають значення CSS (наприклад, сімейство шрифтів: '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 на дані: посилання text / html за допомогою JavaScript .

— користувач
джерело

1

Вам навіть не потрібен будь-який JavaScript: srcатрибут можна вказати вбудовано, якщо його захищено, наприклад, за допомогою rawurlencodePHP:<iframe src="<?php echo htmlspecialchars('data:text/html,' . rawurlencode($content)); ?>"></iframe>

— Джейк

Корпорація Майкрософт додала підтримку для цього майже одночасно з додаванням підтримки 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

Вказівка ​​вмісту iframe замість атрибута src на сторінці

Вказівка вмісту iframe замість атрибута src на сторінці