5

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?

Koja
  • 716
  • 2
  • 9
  • 25
Victor Grazi
  • 15,563
  • 14
  • 61
  • 94
  • unless you can pass your content to a separate angular app on a different page catered to the iframe, this won't work. there is no way to perform two way binding across an iframe. – Claies May 15 '15 at 01:28
  • have you seen [this post](http://stackoverflow.com/questions/23757015/embed-youtube-videos-using-ng-repeat-in-angular)? – sfletche May 15 '15 at 01:29
  • You might find this question on [how to make a div resizable](https://stackoverflow.com/questions/391440/make-div-resizeable) useful. – BSMP May 15 '15 at 01:32
  • [jQueryUI Draggable Widget](http://api.jqueryui.com/draggable/) – BSMP May 15 '15 at 01:36
  • Here's [an example](http://plnkr.co/edit/UBWJLWCYQuP5eCJhZ81k?p=preview) of `ng-repeat` with `iframes` – sfletche May 15 '15 at 01:36
  • @sfletche your examples both load from a url. – Victor Grazi May 15 '15 at 03:03
  • @BSMP Interesting widget, now to get it to be resizable – Victor Grazi May 15 '15 at 03:03

1 Answers1

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

Will Reese
  • 2,801
  • 2
  • 15
  • 27