Mã html dưới dạng nguồn IFRAME thay vì URL

122

Mã chuẩn này cho IFRAME, có cách nào để thay thế URL src bằng mã Just html không? vì vậy vấn đề của tôi rất đơn giản, tôi có một trang mà nó tải một phần thân HTML từ MYSQL, tôi muốn trình bày mã đó trong một khung để nó hiển thị nó độc lập với phần còn lại của trang và trong giới hạn của đường viền cụ thể đó.

<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

— Max
nguồn

Câu trả lời:

149

Bạn có thể làm điều này với một URL dữ liệu. Điều này bao gồm toàn bộ tài liệu trong một chuỗi HTML. Ví dụ: HTML sau:

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

có thể được mã hóa như sau:

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

và sau đó đặt làm srcthuộc tính của iframe. Ví dụ .

Chỉnh sửa: Cách thay thế khác là thực hiện việc này với Javascript. Đây gần như chắc chắn là kỹ thuật tôi muốn chọn. Bạn không thể đảm bảo rằng trình duyệt sẽ chấp nhận một URL dữ liệu trong bao lâu. Kỹ thuật Javascript sẽ giống như sau:

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

iframedoc.body.innerHTML = 'Hello world';

Thí dụ

Chỉnh sửa 2 (tháng 12 năm 2017) : sử dụng thuộc tính srcdoc của Html5 , giống như trong câu trả lời của Saurabh Chandra Patel , bây giờ ai sẽ là câu trả lời được chấp nhận! Nếu bạn có thể phát hiện IE / Edge hiệu quả , một mẹo là chỉ sử dụng thư viện srcdoc-polyfill cho chúng và thuộc tính srcdoc "thuần túy" trong tất cả các trình duyệt không phải IE / Edge (kiểm tra caniuse.com để chắc chắn).

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

— một ngày nào đó
nguồn

Hỗ trợ Internet Explorer? Dữ liệu URI không thể đại diện các file html trong IE8

— franzlorenzon

Có cách nào để cung cấp tiêu đề nguồn gốc chéo ở đây không? Chrome tiếp tục phàn nàn về Blocked a frame with origin "http://localhost" from accessing a cross-origin frame.

— jozxyqk

@AndrewSwan Tôi không hiểu rõ vấn đề với các dấu ngoặc kép. Bạn có thể cho tôi một ví dụ?

— Septagram

Đối với bất cứ ai như tôi những người đang tìm cách mã hóa HTML theo cách này với php, bạn muốn rawurlencode ( php.net/manual/en/function.rawurlencode.php )

— Braiba

Lưu ý rằng nếu bạn sử dụng innerHTMLtrình duyệt sẽ không thực thi các thẻ tập lệnh con. Để biết thêm thông tin, hãy kiểm tra phần Cân nhắc bảo mật của trang Element.innerHTML MDN.

— Leonid Vasilev

sử dụng html5thuộc tính mới của srcdoc(srcdoc-polyfill) Docs

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

Hỗ trợ trình duyệt - Đã kiểm tra trong các trình duyệt sau:

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
nguồn

Cảm ơn ! Tôi cần một giải pháp cho chế độ xem webkit hiện đại và đó là cách đơn giản nhất để làm điều đó!

— Antoine Bolvy

Nó không được hỗ trợ trong IE

— dude

CanIUse.com nói rằng sự hỗ trợ khá kém: caniuse.com/#search=srcdoc

— msquitieri

@msquitieri Không, nó nói rằng hỗ trợ bản địa kém, không phải của polyfill.

— Walf

Nhưng phá vỡ này càng sớm càng tốt bắt đầu sử dụng dấu ngoặc kép

— Agil

Theo W3Schools, HTML 5 cho phép bạn làm điều này bằng cách sử dụng thuộc tính "srcdoc" mới , nhưng sự hỗ trợ của trình duyệt dường như rất hạn chế.

— Andrew Swan
nguồn

Ngoài ra còn có một Polyfill cho srcdoc .

— Uwe Keim

@UweKeim Cảm ơn bạn đã đề xuất polyfill. Nó nhẹ và hoạt động tuyệt vời.

— The Muffin Man

Theo caniuse.com, chỉ có trình duyệt IE và Edge khét tiếng của Microsoft (ngoài Opera Mini) không hỗ trợ thuộc tính srcdoc , vì vậy nó KHÔNG "rất hạn chế". Chỉ cần sử dụng srcdoc-polyfill cho người dùng Microsoft.

— Heitor