iframe srcdocの代わりに？

一般的に私はiframeの使用に反対していますが、それは私の特定の問題を解決しました。iframe srcdocの代わりに？

私はウェブページに小さなMCEエディタを持っているということです。ユーザがこのエディタを使用してコンテンツを作成した後、コンテンツはHTMLとしてWebアプリケーションに送信されます。このコンテンツはdivに表示されます。事実、tinyMCEは、という位置と、ウェブアプリケーションの残りの部分とで壊れているものがあるスタイルを追加することがあります。

テストすると、新しいHTML 5 iframe srcdoc="<p>Some HTML</p>"とseamless="true"が自分の状況に最適であることがわかりました。それはシームレスに見え、コンテンツのスタイルと私のスタイルはそのままだった。悲しいことに、HTML5のsrcdoc属性がまだAndroidでサポートされていないことがわかりました（http://w3schools.com/html5/tryit.asp?filename=tryhtml5_iframe_srcdocはクロムとアンドロイドブラウザで異なる結果になります）。

質問：受信したコンテンツのすべてのスタイルを保持してdivに含めるiframe srcdocの代替方法はありますか？

出典

2012-11-03 Sindre

変更エディタ？ –

にも多くのエディタがいますが、同じ起源のiframeで動作することを示すこの例が好きかもしれません。 http://jsfiddle.net/oceog/r4VPr/ –

ありがとう、それはいくつかの変更でトリックをした！ – Sindre

eictoがコメントで示唆しているように、jqueryはreadyイベントでiframeを埋めるために使用できます。コンテンツの高さにはiframeの高さを調整するために、いくつかの汚いハックを適用する必要がありましたが、私は使用して終了コードは、多かれ少なかれです：

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

出典

2012-11-04 12:01:55 Sindre

コンテンツのいずれかが信頼できない、unsandboxedの場合、これを行わないでください - ユーザーがコードスニペットに貼り付ける場合は可能です... –

あなたは、このようなIFRAMEの文書に書き込むことができます。

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

出典

2013-07-17 18:21:46

新しいData URI Schemeを使用してください。例：

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

出典

2017-05-20 16:37:50 CerebralDatabank

http://msdn.microsoft.com/en-us/library/を参照してください。 cc848897（v = VS.85）.aspx データURIは、次の要素および/または属性に対してのみサポートされています。オブジェクト（画像のみ） img 入力タイプ=画像リンク background、backgroundImageなどのURLを受け入れるCSS宣言。 – jbiddick

答えて

関連する問題