Lựa chọn thay thế cho iframe srcdoc?

Nói chung tôi chống lại việc sử dụng iframe, nhưng nó giải quyết được một vấn đề cụ thể của tôi.Lựa chọn thay thế cho iframe srcdoc?

Điều này là tôi có trình chỉnh sửa TinyMCE tại trang web. Sau khi người dùng đã tạo nội dung bằng trình chỉnh sửa này, nội dung được gửi dưới dạng HTML tới ứng dụng web. Nội dung này sau đó được hiển thị trong một div. Thing là tinyMCE thường thêm phong cách với vị trí tuyệt đối và những thứ mà phá vỡ với phần còn lại của ứng dụng web.

Khi thử nghiệm tôi phát hiện ra rằng HTML 5 iframe srcdoc="<p>Some HTML</p>" và seamless="true" mới hoàn hảo cho hoàn cảnh của tôi. Nó trông liền mạch và phong cách nội dung và phong cách của tôi vẫn còn nguyên vẹn. Đáng buồn là bây giờ tôi thấy rằng thuộc tính srcdoc HTML5 chưa được Android hỗ trợ (http://w3schools.com/html5/tryit.asp?filename=tryhtml5_iframe_srcdoc mang lại kết quả khác nhau trong trình duyệt chrome và android).

Vì vậy, câu hỏi đặt ra là: Có cách nào thay thế cho iframe srcdoc sẽ giữ lại tất cả kiểu nội dung đã nhận và chứa nó trong div không?

Nguồn

2012-11-03 Sindre

trình chỉnh sửa thay đổi? có rất nhiều trình chỉnh sửa trên mạng –

cũng có thể bạn thích ví dụ này minh họa việc làm việc với iframe trên cùng một nguồn gốc. http://jsfiddle.net/oceog/r4VPr/ –

Cảm ơn, điều đó đã thực hiện mẹo với một số sửa đổi! – Sindre

Theo đề xuất của eicto bằng nhận xét, jquery có thể được sử dụng để điền vào iframe tại sự kiện sẵn sàng. Để điều chỉnh chiều cao của iframe để chiều cao của nội dung một số hacks bẩn phải được áp dụng, nhưng mã tôi đã kết thúc sử dụng là nhiều hay ít:

HTML

<!-- IMPORTANT! Do not add src or srcdoc --> 
<!-- NOTICE! Add border:none to get a more "seamless" integration --> 
<iframe style="border:none" scrolling="no" id="myIframe"> 
    Iframes not supported on your device 
</iframe>

// Wait until iFrame is ready (body is then available) 
$('#myIframe').ready(function() { 

    var externalHtml = '<p>Hello World!</p>'; 

    // Find the body of the iframe and set its HTML 
    // Add a wrapping div for height hack 
    // Set min-width on wrapping div in order to get real height afterwords 
    $('#myIframe').contents().find('body') 
     .html('<div id="iframeContent" style="min-width:'+$('body').width()+'px">' 
      +externalHtml 
      +'</div>' 
    ); 

    // Let the CSS load before getting height 
    setTimeout(function() { 
     // Set the height of the iframe to the height of the content 
     $('#myIframe').css('height', 
      $('#myIframe').contents() 
      .find('#iframeContent').height() + 'px' 
     ); 
    },50); 
});

Nguồn

2012-11-04 12:01:55 Sindre

Chỉ cần không làm điều này nếu bất kỳ nội dung nào là không đáng tin cậy và không được hộp cát - như có thể có thể nếu người dùng dán trong đoạn mã ... –

Bạn có thể viết vào tài liệu của một iframe như thế này:

var iframeDocument = document.querySelector('#foo').contentWindow.document; 
var content = '<html></html>'; 
iframeDocument.open('text/html', 'replace'); 
iframeDocument.write(content); 
iframeDocument.close();

Nguồn

2013-07-17 18:21:46

Sử dụng Data URI Scheme mới. Ví dụ:

var content = "<html></html>";
document.getElementById("my_iframe_id").src = "data:text/html;charset=UTF-8," + content;

Nguồn

2017-05-20 16:37:50 CerebralDatabank

xem http://msdn.microsoft.com/en-us/library/ cc848897 (v = VS.85) .aspx URI dữ liệu chỉ được hỗ trợ cho các thành phần và/hoặc thuộc tính sau. đối tượng (chỉ hình ảnh) img loại đầu vào = image liên kết Tuyên bố CSS chấp nhận URL, chẳng hạn như nền, backgroundImage, v.v. – jbiddick

Lựa chọn thay thế cho iframe srcdoc?

Trả lời

Các vấn đề liên quan