作爲IFRAME源代碼而不是URL的HTML代碼

這個IFRAME的標準代碼是否有一種方法可以用Just html代碼替換src URL？所以我的問題很簡單，我有一個從MYSQL加載HTML主體的頁面我想在一個框架中呈現該代碼，以便它自己獨立於頁面的其餘部分並且在該特定邊界的範圍內呈現它。作爲IFRAME源代碼而不是URL的HTML代碼

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

來源

2011-05-23 Max

您可以使用數據網址進行此操作。這包括整個文檔在一個單一的HTML字符串中。例如，下面的HTML：

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

可以被編碼爲這樣的：

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

，然後設置爲iframe的src屬性。 Example。

編輯：另一種選擇是用Javascript來做到這一點。這幾乎可以肯定是我選擇的技術。您無法保證瀏覽器接受數據網址的時間。 JavaScript的技術將是這個樣子：

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

iframedoc.body.innerHTML = 'Hello world';

Example

編輯2（2017年十二月）：使用HTML5的srcdoc屬性，就像在SAURABH錢德拉帕特爾「現在應該是被接受的答案！如果您可以detect IE/Edge efficiently，則小技巧是僅針對它們使用srcdoc-polyfill庫，並且在所有非IE/Edge瀏覽器中使用「純」srcdoc屬性（請確定檢查caniuse.com）。

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

來源

2011-05-23 20:46:36 lonesomeday

與JS方法的問題是，如果HTML包含單引號（其中OP不知道，直到運行時），爲了不打破innerHTML賦值語句，他們需要從JS的角度逃脫......？ – 2013-04-24 05:19:42

是的，顯然JS需要有效。這就是爲什麼，與我在我的回答中所說的相反，我幾乎肯定不會這樣做。我只是使用一個正常的iframe！ – lonesomeday 2013-04-24 08:54:49

Internet Explorer支持？數據URI不能代表IE8中的html文件 – franzlorenzon 2013-04-24 12:05:12

據W3Schools的，HTML 5讓你這個用new "srcdoc" attribute做，但瀏覽器的支持顯得非常有限。

來源

2013-04-24 03:03:59

還有一個[srcdoc的Polyfill]（https://github.com/jugglinmike/srcdoc-polyfill）。 – 2014-09-02 05:41:17

@UweKeim感謝您提供polyfill。它重量輕，效果很好。 – 2014-10-16 04:16:54

根據[caniuse.com]（https://caniuse.com/#feat=iframe-srcdoc），只有臭名昭着的微軟IE和Edge瀏覽器不是「非常有限」。只需爲微軟用戶使用[srcdoc-polyfill]（https://github.com/jugglinmike/srcdoc-polyfill）即可。 – Heitor 2017-12-26 04:36:46

使用HTML5 srcdoc，填充工具Docs

<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

來源

2015-05-16 09:29:52

謝謝！我需要現代webkit webview的解決方案，而這是迄今爲止最簡單的方法！ – 2015-06-21 04:13:18

它不支持在IE – dude 2015-10-07 11:43:02

官方文檔說它支持IE-6 + – 2015-10-07 14:37:24

作爲IFRAME源代碼而不是URL的HTML代碼

回答

相關問題