Alternativen zu iframe srcdoc?

Generell bin ich gegen die Verwendung von iframes, aber es löste ein bestimmtes Problem von mir.Alternativen zu iframe srcdoc?

Die Sache ist, dass ich einen winzigen MCE-Editor auf einer Webseite habe. Nachdem der Benutzer den Inhalt mit diesem Editor erstellt hat, wird der Inhalt als HTML an eine Webanwendung gesendet. Dieser Inhalt wird dann in einem div angezeigt. Thing ist, dass tinyMCE oft Stile mit absoluten Position und Dinge hinzufügen, die mit dem Rest der Web-Anwendung brechen.

Beim Testen fand ich heraus, dass das neue HTML 5 iframe srcdoc="<p>Some HTML</p>" und seamless="true" für meine Situation perfekt war. Es sah nahtlos aus und der Inhalt Stil und mein Stil war intakt. Leider sehe ich jetzt, dass das HTML5 srcdoc Attribut noch nicht von Android unterstützt wird (http://w3schools.com/html5/tryit.asp?filename=tryhtml5_iframe_srcdoc ergibt unterschiedliche Ergebnisse in Chrome und Android Browser).

Die Frage ist also: Gibt es eine Alternative zum iframe srcdoc, die den gesamten Stil des empfangenen Inhalts erhalten und in einem div enthalten wird?

Quelle

2012-11-03 Sindre

Editor ändern? Es gibt viele Editoren im Netz –

auch Sie mögen dieses Beispiel mögen, die das Arbeiten mit iframe auf demselben Ursprung demonstrieren. http://jsfiddle.net/oceog/r4VPr/ –

Danke, das hat den Trick mit einigen Modifikationen! – Sindre

Wie von Eicto per Kommentar vorgeschlagen, könnte jquery verwendet werden, um einen Iframe im Ready-Event zu füllen. Um einzustellen hatte die Höhe des iframe auf die Höhe des Inhalts einige unsaubere Änderungen angewendet werden, aber der Code, den ich am Ende mit mehr oder weniger:

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

Quelle

2012-11-04 12:01:55 Sindre

Tun Sie dies einfach nicht, wenn einer der Inhalte nicht vertrauenswürdig und unsandboxed ist - wie es möglich ist, wenn Benutzer in Code-Snippets einfügen ... –

Sie können wie folgt auf das Dokument eines iframe schreiben:

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

Quelle

2013-07-17 18:21:46

Verwenden Sie das neue Data URI Scheme. Beispiel:

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

Quelle

2017-05-20 16:37:50 CerebralDatabank

siehe http://msdn.microsoft.com/en-us/library/ cc848897 (v = VS.85) .aspx Daten-URIs werden nur für die folgenden Elemente und/oder Attribute unterstützt. Objekt (nur Bilder) img input type = image link CSS-Deklarationen, die eine URL akzeptieren, wie background, backgroundImage und so weiter. – jbiddick

Alternativen zu iframe srcdoc?

Antwort

Verwandte Themen