This solution has worked well for my needs. The problem can be solved by placing the needed content for the iframe contents in a hidden div and then appending that content in (with JavaScript) to the waiting iframe. The plan: sandbox with JavaScript and iframes It gave me the help I needed to to enable the local content to be added into the iframe via JavaScript. Add local content to an iframe with JavaScript? In the meantime time is money so I needed to press on and find a solution. Is there a way? I’d love to do this without JS if possible. ![]() For example, adding this inside an existing HTML page does not work: Īfter trying many things, I still wasn’t able to author the iframe in advance that included only local content. It doesn’t seem possible to author an iframe inside an existing page that contains only local content. However, this presents further problem iframes are for showing external content on a page (our primitive page within a page description). After all, an iframe is a separate document rendered inside the existing one. To truly limit the reach of the external styles we could use an iframe. However, as already mentioned, the external CSS typically has its own global defaults set (default styling for elements) so it never truly isolates what gets applied. Obviously it’s possible to pseudo-scope CSS crudely by name-spacing. It didn’t create the ‘sandbox’ environment I was looking for. ![]() Even ‘normalize’ styles and the like would make subtle changes to the appearance of the rendered snippets. ![]() Like embedding a Codepen/JSBin onto the page if you will but with local, not external content.Īlthough it’s trivial to bring in a separate style sheet that is relevant to the code snippet (just by adding another link in the ), the existing CSS could/would still apply to the code snippet too. Why would you want to load local content inside an iframe? Surely it would be better to just place it inside the existing page structure? Well, in my instance I wanted to see isolated code (HTML/CSS) snippets on an existing page, rendered by an external style sheet. But what if you want to have local content inside an iframe? This only seems possible with a little JavaScript but there is a way to do it. Iframes are principally used for loading external content onto an existing page.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |