Kod HTML jako źródło IFRAME zamiast adresu URL

123

Czy w tym standardowym kodzie IFRAME istnieje sposób na zastąpienie adresu URL źródła treści kodem Just html? więc mój problem jest prosty, mam stronę, na której ładuje treść HTML z MYSQL. Chcę przedstawić ten kod w ramce, aby uczynił go niezależnym od reszty strony oraz w granicach tego konkretnego obramowania.

<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 Maks
źródło

Odpowiedzi:

150

Możesz to zrobić za pomocą adresu URL danych. Obejmuje to cały dokument w jednym ciągu HTML. Na przykład następujący kod HTML:

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

można zakodować w ten sposób:

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

a następnie ustaw jako srcatrybut elementu iframe. Przykład .

Edycja: Inną alternatywą jest zrobienie tego za pomocą JavaScript. Jest to prawie na pewno technika, którą wybrałbym. Nie możesz zagwarantować, jak długo adres URL danych zaakceptuje przeglądarka. Technika Javascript wyglądałaby mniej więcej tak:

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

iframedoc.body.innerHTML = 'Hello world';

Przykład

Edycja 2 (grudzień 2017) : użyj atrybutu srcdoc HTML5 , tak jak w odpowiedzi Saurabh Chandra Patel , która teraz powinna być zaakceptowaną odpowiedzią! Jeśli potrafisz skutecznie wykryć IE / Edge , wskazówką jest użycie biblioteki srcdoc-polyfill tylko dla nich oraz atrybutu „pure” srcdoc we wszystkich przeglądarkach innych niż IE / Edge (sprawdź caniuse.com dla pewności).

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>
samotny dzień
źródło
5
Obsługa programu Internet Explorer?
Identyfikator
1
Czy istnieje sposób, aby podać tutaj nagłówki krzyżowe? Chrome ciągle narzeka Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.
jozxyqk
1
@AndrewSwan Nie do końca rozumiem problem z pojedynczymi cudzysłowami. Czy możesz podać mi przykład?
Septagram
5
Dla każdego takiego jak ja, który szukał sposobu zakodowania HTML w ten sposób za pomocą php, potrzebujesz rawurlencode ( php.net/manual/en/function.rawurlencode.php )
Braiba
4
Zauważ, że jeśli używasz innerHTMLprzeglądarki, nie będzie wykonywał podrzędnych tagów skryptów. Aby uzyskać więcej informacji, zapoznaj się z sekcją dotyczącą kwestii bezpieczeństwa na stronie Element.innerHTML MDN.
Leonid Vasilev
92

użyj html5nowego atrybutu srcdoc(srcdoc-polyfill) Docs 

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

Obsługa przeglądarek - przetestowano w następujących przeglądarkach:

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
Saurabh Chandra Patel
źródło
1
Dzięki ! Potrzebowałem rozwiązania dla nowoczesnego Webviewkita, a to był zdecydowanie najprostszy sposób!
Antoine Bolvy
1
To nie jest obsługiwane w IE
koleś,
1
CanIUse.com twierdzi, że wsparcie jest dość słabe: caniuse.com/#search=srcdoc
msquitieri
5
@msquitieri Nie, mówi, że natywne wsparcie jest słabe, a nie polyfill.
Walf
1
Ale to się psuje, gdy tylko zaczniesz używać cudzysłowów
Agil
21

Według W3Schools, HTML 5 pozwala to zrobić za pomocą nowego atrybutu „srcdoc” , ale obsługa przeglądarki wydaje się bardzo ograniczona.

Andrew Swan
źródło
4
Istnieje również Polyfill dla srcdoc .
Uwe Keim
2
@UweKeim Dzięki za zasugerowanie wypełnienia polyfill. Jest lekki i działa świetnie.
The Muffin Man
1
Według caniuse.com tylko niesławne przeglądarki Microsoft IE i Edge (poza Operą Mini) nie obsługują atrybutu srcdoc , więc NIE jest on „bardzo ograniczony”. Po prostu użyj srcdoc-polyfill dla użytkowników Microsoft.
Heitor