How can I get angularJS dynamic content to display in an iframe?

Question

I am generating some tabular content using ng-repeat in AngularJS, and I would like to have this content display in an iframe, so that the user can drag it and resize it.

I can't use the iframe src attribute, because that requires a URL and I am generating the content on the client.

I probably want some variant of srcdoc, but that seems to want a single quoted line of html code.

How can I construct my iframe such that the ng-repeat generated content is displayed within?

Answer 1

You can add an AngularJS table to an iframe. The support is limited to HTML5 but it looks something like this:

HTML

<iframe id="frame" sandbox="allow-same-origin allow-scripts" srcdoc="" seamless="true"></iframe>

Javascript

document.getElementById("frame").contentWindow.document.getElementById("mydiv")

The srcdoc property can be used instead of src to indicate you will be providing code for the contents. Seamless is also expected when you use srcdoc; it tells the browser that the iframe's contents are supposed to be treated as a part of the website, rather than a nested one. Unfortunately, this will trigger styling changes that eliminate the whole reason you wanted the iframe in the first place (the resize handles disappear). Furthermore, you'd have to inject css files and javascript files into the iframe - it's not worth it.

I'd recommend using something like jQuery UI resizable: https://jqueryui.com/resizable/

Here's a fiddle I was using to test out controlling iframe contents. It's very basic but accurately demonstrates how much trouble they actually are: Fiddle