Chỉ định nội dung của iframe thay vì thuộc tính src cho một trang

88

Tôi hiện đang làm việc trên một biểu mẫu bao gồm một số đầu vào tệp để tải ảnh lên. Có một onchange()sự kiện cho những đầu vào đó gửi ảnh đến một iframe, sau đó tải động các ảnh đã tải lên vào biểu mẫu, với các trường được sửa đổi cho chúng (như tên và địa phương hóa ).

Vì tôi không thể lồng các biểu mẫu, nên biểu mẫu file_inputcũng được chứa trong một iframe. Cuối cùng, tôi sử dụng một iframebên trong của cái khác iframe. Vì vậy, tôi có một cái gì đó như thế này:

<form>
<!-- LOTS OF FIELDS!! -->
<iframe src="file_input_url">
<!-- iframe which loads a page of a form with a file input-->
</iframe>
</form>

và HTML được tải vào iframetương tự như (ngoại trừ html,head và bodythẻ)

<form target="upload_iframe">
<input type="file" onchange="this.form.submit()">
</form>
<iframe name="upload_iframe"></iframe>

Điều này hoạt động tốt, ngoại trừ thực tế là phải mất vài giây để tải iframetệp đầu tiên , vì vậy đầu vào tệp không tải với phần còn lại của trang. Đây không phải là lý tưởng trực quan. Tôi có thể giải quyết nó nếu tôi có thể chỉ địnhiframe nội dung mà không cần tải trang khác (được chỉ định bởi file_input_urltrang đầu tiên iframe).

Có cách nào để chỉ định iframenội dung trong cùng một tài liệu, hoặc nó chỉ có thể được chỉ định bằng srcthuộc tính, yêu cầu tải trang khác?

html iframe

— orlox
nguồn

Sẽ không mất "vài giây" để tải iframe đó. Tôi hy vọng nó sẽ giống như một phần mười mili giây cộng với "thời gian để cắn" (cũng phải là mili giây). Bạn nên điều tra xem điều gì gây ra tất cả độ trễ - có thể là do lỗi xảy ra với máy chủ của bạn.

— Abhi Beckert

95

Bạn có thể .write()đưa nội dung vào tài liệu iframe. Thí dụ:

<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>

— Guffa
nguồn

1

Tuy nhiên, tôi đã nghĩ đến khả năng này, html phải được tải vào iframe rất phức tạp và việc xử lý nó hoàn toàn bằng javascript để ghi nó vào iframe sẽ che khuất việc triển khai quá nhiều (đến mức tôi muốn Để lại nó như nó là).

— orlox

2

@orlox: Lấy nội dung của bạn từ máy chủ bằng Ajax và đưa nó vào. Nếu bạn không muốn đi theo cách đó, hãy tạo một divphần tử ẩn với nội dung của bạn và đặt nội dung của nó ở iframegiữa <body>và </body>.

— stackular,

11

Tôi càng tìm hiểu về iframe hạn chế tôi càng ghét họ

— John Magnolia

1

Làm cách nào để thoát khỏi các dấu nháy đơn bằng phương pháp này? Một số quan trọng trong HTML (ví dụ: class = 'example'), một số quan trọng CSS (ví dụ: font-family: 'Verdana';) và một số là nội dung (ví dụ: George O'Malley).

— Dan Bechard

2

@Dan: Để thoát khỏi bất kỳ giá trị nào được sử dụng trong chuỗi JavaScript được phân tách bằng dấu nháy đơn, trước tiên bạn thoát dấu gạch chéo ngược, sau đó là dấu nháy đơn. Ví dụ sử dụng C # để ra một chuỗi trong mã: doc.write('<%= html.Replace("\\", "\\\\").Replace("'", "\\'") %>');.

— Guffa

36

iframe hiện hỗ trợ srcdoc có thể được sử dụng để chỉ định nội dung HTML của trang để hiển thị trong khung nội tuyến.

— Ayush Gupta
nguồn

2

IE không hỗ trợ quyền này không nhưng bạn có thể kiểm tra caniuse cho tình trạng mới nhất về nó.

— Ayush Gupta

Tài liệu về MDN

— Benoit Blanchon

22

Bạn có thể sử dụng data:URL trong 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>

Mở rộng đoạn mã

Sự khác biệt giữa srcdoc = “…” và src = “data: text / html,…” trong iframe .

Chuyển đổi HTML sang dữ liệu: liên kết văn bản / html bằng JavaScript .

— người dùng
nguồn

1

Bạn thậm chí không cần bất kỳ JavaScript: các srcthuộc tính có thể được xác định inline nếu thoát ví dụ sử dụng rawurlencodetrong PHP:<iframe src="<?php echo htmlspecialchars('data:text/html,' . rawurlencode($content)); ?>"></iframe>

— Jake

Microsoft đã thêm hỗ trợ cho điều này cùng lúc với việc họ thêm hỗ trợ srcdocvà srcdoclà cách tốt hơn để làm điều này. URL dữ liệu chỉ được hỗ trợ rộng rãi cho hình ảnh và CSS - theo như tôi biết thì không có phiên bản Internet Explorer nào hỗ trợ chúng trong iframe.

— Abhi Beckert

6

Kết hợp với những gì Guffa đã mô tả, bạn có thể sử dụng kỹ thuật được mô tả trong Giải thích của <script type = "text / template"> ... </script> để lưu trữ tài liệu HTML trong một scriptphần tử đặc biệt (xem liên kết để biết giải thích trên cách này hoạt động). Điều đó dễ dàng hơn rất nhiều so với việc lưu trữ tài liệu HTML trong một chuỗi.

— ximo
nguồn

Suy nghĩ thứ hai, điều đó sẽ không hoạt động tốt cho một tài liệu HTML đầy đủ. Tags như <html>, <body>, <script>sẽ chỉ gây nhầm lẫn cho trình duyệt, phá vỡ vẽ của tài liệu.

— ximo

Điều đó dường như không phải là một vấn đề, các thẻ HTML bên trong các tập lệnh bị bỏ qua.

— HBP

Bạn nói đúng :) Tôi đã thực sự chưa thử kỹ thuật khi tôi viết điều đó, và chắc hẳn đã có giả định đó từ đâu đó. Sau đó, tôi phát hiện ra rằng bất kỳ thứ gì trong <script>thẻ sẽ bị trình duyệt bỏ qua .. Cảm ơn bạn đã sửa lỗi cho tôi!

— ximo 22/09/13