Код Html як джерело IFRAME, а не URL

123

Цей стандартний код для IFRAME, чи є спосіб замінити URL-адресу src на просто html-код? тому моя проблема проста, у мене на сторінці вона завантажується HTML-тілом з MYSQL. Я хочу представити цей код у кадрі, щоб він робив його самостійним незалежно від решти сторінки та в межах цього конкретного кордону.

<iframe src="http://example.com" name="test" height="120" width="600">You need a Frames Capable browser to view this content.</iframe>

html iframe frame

— Макс
джерело

Відповіді:

150

Це можна зробити за допомогою URL-адреси даних. Сюди входить весь документ у одному рядку HTML. Наприклад, такий HTML:

<html><body>foo</body></html>

можна закодувати так:

data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3Efoo%3C/body%3E%3C/html%3E

а потім встановити як srcатрибут iframe. Приклад .

Редагувати: Інша альтернатива - це зробити за допомогою Javascript. Це майже напевно техніка, яку я обрав би. Ви не можете гарантувати, скільки часу URL-адреса даних буде приймати браузер. Техніка Javascript буде виглядати приблизно так:

var iframe = document.getElementById('foo'),
    iframedoc = iframe.contentDocument || iframe.contentWindow.document;

iframedoc.body.innerHTML = 'Hello world';

Приклад

Редагуйте 2 (грудень 2017 року) : використовуйте атрибут srcdoc Html5 , як і у відповіді Савраб Чандра Пател , хто зараз повинен відповісти! Якщо ви зможете ефективно виявити IE / Edge , порада використовувати бібліотеку srcdoc-polyfill лише для них та "чистий" атрибут srcdoc у всіх браузерах, які не належать до IE / Edge (перевірте caniuse.com ).

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

— самотній день
джерело

Підтримка Internet Explorer? URI даних не може представляти html-файли в IE8

— францлорензоні,

Чи є тут можливість вказати заголовки перехресного походження? Chrome продовжує скаржитися Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.

— jozxyqk

@AndrewSwan Я не дуже розумію проблему з цитатами. Чи можете ви надати мені приклад?

— Септаграма

Для всіх, як я, хто шукав, як кодувати HTML таким чином за допомогою php, ви хочете rawurlencode ( php.net/manual/en/function.rawurlencode.php )

— Braiba

Зауважте, що якщо ви користуєтеся innerHTMLбраузером, вони не виконують теги скриптів для нащадків. Для отримання додаткової інформації перегляньте розділ Міркування щодо безпеки сторінки Element.innerHTML MDN.

— Леонід Василев

використовувати html5новий атрибут srcdoc(srcdoc-polyfill) Документи

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

Підтримка браузера - тестується в таких браузерах:

Microsoft Internet Explorer
6, 7, 8, 9, 10, 11
Microsoft Edge
13, 14
Safari
4, 5.0, 5.1 ,6, 6.2, 7.1, 8, 9.1, 10
Google Chrome
14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24.0.1312.5 (beta), 25.0.1364.5 (dev), 55
Opera
11.1, 11.5, 11.6, 12.10, 12.11 (beta) , 42
Mozilla FireFox
3.0, 3.6, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 (beta), 50

— Саурах Чандра Патель
джерело

Дякую ! Мені потрібно було рішення для сучасного веб-перегляду webkit, і це був, безумовно, найпростіший спосіб зробити це!

— Антуан Болві

Він не підтримується в IE

— чувак

CanIUse.com каже , що підтримка досить бідний: caniuse.com/#search=srcdoc

— msquitieri

@msquitieri Ні, це говорить про те, що підтримка вроджених погана, а не поліфіл.

— Вальф

Але це ламається , як тільки ви починаєте використовувати лапки

— Агіль

За версією W3Schools, HTML 5 дозволяє це зробити за допомогою нового атрибута "srcdoc" , але підтримка браузера здається дуже обмеженою.

— Ендрю Лебедь
джерело

Існує також поліфіл для srcdoc .

— Уве Кеїм

@UweKeim Дякую, що запропонували поліфіл. Він легкий і чудово працює.

— The Muffin Man

За інформацією caniuse.com, лише сумнозвісні браузери IE та Edge Microsoft (крім Opera Mini) не підтримують атрибут srcdoc , тому НЕ "дуже обмежений". Просто використовуйте srcdoc-polyfill для користувачів Microsoft.

— Гейтор