Alternatywy dla iframe srcdoc?

Generalnie jestem przeciwny używaniu ramek iframe, ale rozwiązałam konkretny problem.Alternatywy dla iframe srcdoc?

Chodzi o to, że mam malutkiego edytora MCE na stronie internetowej. Po utworzeniu treści za pomocą tego edytora zawartość jest wysyłana jako HTML do aplikacji internetowej. Ta treść jest następnie wyświetlana w div. Chodzi o to, że tinyMCE często dodaje style z pozycją absolutną i rzeczy, które zrywają z resztą aplikacji internetowej.

Podczas testów dowiedziałem się, że nowy HTML 5 iframe srcdoc="<p>Some HTML</p>" i seamless="true" był idealny dla mojej sytuacji. Wyglądało to bez komplikacji, a styl zawartości i mój styl były nienaruszone. Niestety widzę, że atrybut srcdoc HTML5 nie jest jeszcze obsługiwany przez Androida (http://w3schools.com/html5/tryit.asp?filename=tryhtml5_iframe_srcdoc daje inny wynik w przeglądarce Chrome i Android).

Pytanie brzmi: czy istnieje alternatywa dla srcdoc iframe, która zachowa cały styl otrzymanej treści i będzie zawierał element div?

Źródło

2012-11-03 Sindre

edytora zmian? istnieje wiele edytorów w sieci –

również może Ci się spodobać ten przykład, który demonstruje pracę z iframe na tym samym początku. http://jsfiddle.net/oceog/r4VPr/ –

Dzięki, że udało się z pewnymi modyfikacjami! – Sindre

Zgodnie z sugestią komentarza przez eicto, jquery może zostać użyty do wypełnienia elementu iframe w gotowym wydarzeniu. Aby wyregulować wysokość iframe do wysokości zawartości niektóre brudne sztuczki należało zastosować, ale kod I skończył przy użyciu jest bardziej lub mniej:

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

Źródło

2012-11-04 12:01:55 Sindre

Po prostu nie rób tego, jeśli którakolwiek z treści jest niezaufana i nie jest zapakowana w skrzynki - jeśli to możliwe, jeśli użytkownik wkleja fragmenty kodu ... –

można pisać do dokumentu iframe tak:

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

Źródło

2013-07-17 18:21:46

Użyj nowego Data URI Scheme. Przykład:

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

Źródło

2017-05-20 16:37:50 CerebralDatabank

zobacz http://msdn.microsoft.com/en-us/library/ cc848897 (v = VS.85) .aspx Dane identyfikatory URI są obsługiwane tylko dla następujących elementów i/lub atrybutów. obiekt (tylko obrazy) img typ danych wejściowych = obraz link Deklaracje CSS, które akceptują adresy URL, takie jak tło, tło itp. – jbiddick

Alternatywy dla iframe srcdoc?

Odpowiedz

Powiązane problemy