iframe srcdoc的替代方法？ [英] Alternatives to iframe srcdoc?

问题描述

一般来说，我反对使用iframe，但它解决了我的一个特殊问题。

Generally I am against the use of iframes, but it solved a particular problem of mine.

事情是，我有一个tinyMCE编辑器在网页。在用户使用此编辑器制作内容之后，内容作为HTML发送到web应用。然后，此内容显示在div中。事实是，tinyMCE通常添加样式与位置绝对和突破与web应用程序的其余部分。

The thing is that I have a tinyMCE-editor at a webpage. After the user have made the content using this editor the content is sent as HTML to a web application. This content is then displayed in a div. Thing is that tinyMCE often add styles with position absolute and things that break with the rest of the web applicaiton.

测试时发现新的HTML 5 iframe srcdoc =< p>一些HTML< / p>和 seamless =true是完美的我的情况。它看起来无缝，内容风格和我的风格是完好无损的。很遗憾，我现在看到Android尚不支持HTML5 srcdoc属性（ http://w3schools.com/html5/） tryit.asp？filename = tryhtml5_iframe_srcdoc 在Chrome和Android浏览器中产生不同的结果）。

When testing I found out that the new HTML 5 iframe srcdoc="<p>Some HTML</p>" and seamless="true" was perfect for my situation. It looked seamless and the contents style and my style was intact. Sadly I now see that the HTML5 srcdoc attribute is not yet supported by Android (http://w3schools.com/html5/tryit.asp?filename=tryhtml5_iframe_srcdoc yields different result in chrome and android browser).

所以问题是：iframe srcdoc有什么替代方法可以保留接收到的内容的所有样式，并将其包含在div中？

So the question is: Is there any alternative to the iframe srcdoc which will preserve all style of the received content and contain it in a div?

推荐答案

根据eicto的建议，jquery可以用于在ready事件中填充iframe。为了调整iframe的高度到内容的高度，一些脏的hack必须应用，但我最后使用的代码是或多或少：

As suggested by eicto by comment, jquery could be used to fill an iframe at the ready-event. In order to adjust the height of the iframe to the height of the content some dirty hacks had to be applied, but the code I ended up using is more or less:

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>

JS

// 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);
});

这篇关于iframe srcdoc的替代方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！