Is it possible to hard code the contents of an iframe?

Question

A script, for example, can either be linked:

<script src="myscript.js"></script>

or embedded:

<script type="text/javascript">
    //myscript
</script>

Is there a way to do this with iframes? Manually embed a webpage within a webpage before reaching the client's browser?

To the same effect, is it similarly possible to embed the decoded base64 of an image between img tags?

http://stackoverflow.com/questions/8240101/set-content-of-iframe might do the trick for iframes. Images support data URIs. https://css-tricks.com/data-uris/ — ceejayoz, Apr 25 '16 at 00:42
You can also use `srcdoc` attribute if you don't care about older browser compatibility: http://www.w3schools.com/tags/att_iframe_srcdoc.asp — Selcuk, Apr 25 '16 at 00:43

score 0 · Accepted Answer · answered Apr 25 '16 at 00:44

0

You're looking for the srcdoc attribute. It's got pretty good support, but no IE/Edge yet.

http://caniuse.com/#feat=iframe-srcdoc

answered Apr 25 '16 at 00:44

odnamrataizem

231
2
7

Windows is behind the curve, again. Imagine that – Jerfov2 Apr 25 '16 at 01:22

akardon · Answer 2 · 2016-05-13T06:34:46.190

The fact that IE/Edge doesn't support srcdoc is really annoying but anyway you can use JavaScript to do that and it works in all browsers including Internet explorer and Edge :

var content = '<html><body> <h1>My Sample HTML Code</h1></body></html>';
var iframeDoc = document.querySelector('#myIframeId').contentWindow.document;
iframeDoc.open('text/html', 'replace');
iframeDoc.write(content);
iframeDoc.close();

  <iframe id="myIframeId" />

score 0 · Answer 3 · answered May 13 '16 at 06:33

Actually I've used it in conjunction with AngularJS. I mean Instead of :

<iframe srcdoc="{{htmlContent}}" />

I did :

$scope.$watch('htmlContent', function () {
            var iframeDoc = document.querySelector('iframe#preview').contentWindow.document;
            var content = $scope.htmlContent;
            iframeDoc.open('text/html', 'replace');
            iframeDoc.write(content);
            iframeDoc.close();
        });

<iframe id="preview" />

So that it works on all browsers (tested on Chrome,Firefox,IE11,Edge)

Is it possible to hard code the contents of an iframe?

3 Answers3