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.
我在AngularJS中使用ng-repeat生成一些表格内容，我希望将这个内容显示在iframe中，以便用户可以拖动它并调整其大小。
I can't use the iframe src attribute, because that requires a URL and I am generating the content on the client.
我不能使用iframe src属性，因为这需要一个URL，我在客户端上生成内容。
I probably want some variant of srcdoc, but that seems to want a single quoted line of html code.
我可能想要一些srcdoc的变种，但这似乎想要一个引用的html代码行。
How can I construct my iframe such that the ng-repeat generated content is displayed within?
如何构建我的iframe，以便在其中显示ng-repeat生成的内容？
1 个解决方案
#1
1
You can add an AngularJS table to an iframe. The support is limited to HTML5 but it looks something like this:
您可以将AngularJS表添加到iframe。支持仅限于HTML5，但它看起来像这样：
HTML
HTML
<iframe id="frame" sandbox="allow-same-origin allow-scripts" srcdoc="" seamless="true"></iframe>
Javascript
使用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.
可以使用srcdoc属性而不是src来指示您将为内容提供代码。使用srcdoc时也可以使用Seamless;它告诉浏览器iframe的内容应该被视为网站的一部分，而不是嵌套的。不幸的是，这将触发样式更改，从而消除了您首先想要iframe的整个原因（调整大小句柄消失）。此外，你必须将css文件和javascript文件注入iframe - 这是不值得的。
I'd recommend using something like jQuery UI resizable: https://jqueryui.com/resizable/
我建议使用像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
这是我用来测试控制iframe内容的小提琴。这是非常基本的，但准确地证明了他们实际上有多少麻烦：小提琴
#1
1
You can add an AngularJS table to an iframe. The support is limited to HTML5 but it looks something like this:
您可以将AngularJS表添加到iframe。支持仅限于HTML5，但它看起来像这样：
HTML
HTML
<iframe id="frame" sandbox="allow-same-origin allow-scripts" srcdoc="" seamless="true"></iframe>
Javascript
使用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.
可以使用srcdoc属性而不是src来指示您将为内容提供代码。使用srcdoc时也可以使用Seamless;它告诉浏览器iframe的内容应该被视为网站的一部分，而不是嵌套的。不幸的是，这将触发样式更改，从而消除了您首先想要iframe的整个原因（调整大小句柄消失）。此外，你必须将css文件和javascript文件注入iframe - 这是不值得的。
I'd recommend using something like jQuery UI resizable: https://jqueryui.com/resizable/
我建议使用像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
这是我用来测试控制iframe内容的小提琴。这是非常基本的，但准确地证明了他们实际上有多少麻烦：小提琴