css - Alternatives to iframe srcdoc?

Question

Welcome To Ask or Share your Answers For Others

css - Alternatives to iframe srcdoc?

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

css - Alternatives to iframe srcdoc?

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

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.

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).

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?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T18:38:44+0000

You can write to the document of an iframe like this:

const html = '<body>foo</body>';
const iframeDocument = document.querySelector('iframe#foo').contentDocument;
const content = `<html>${html} </html>`;
iframeDocument.open('text/html', 'replace');
iframeDocument.write(content);
iframeDocument.close();

Categories

css - Alternatives to iframe srcdoc?

css - Alternatives to iframe srcdoc?

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags