如何让 angularJS 动态内容显示在 iframe 中？

Posted 2023-05-08

【中文标题】如何让 angularJS 动态内容显示在 iframe 中？

【英文标题】：How can I get angularJS dynamic content to display in an iframe?

【发布时间】：2015-07-26 19:40:58

【问题描述】：

我正在使用 AngularJS 中的ng-repeat 生成一些表格内容，我希望将这些内容显示在 iframe 中，以便用户可以拖动它并调整其大小。

我不能使用 iframe src 属性，因为它需要一个 URL，而我正在客户端上生成内容。

我可能想要srcdoc 的一些变体，但这似乎需要单引号的html 代码行。

如何构建我的 iframe，以便在其中显示 ng-repeat 生成的内容？

【问题讨论】：

除非您可以将您的内容传递到一个单独的 Angular 应用程序，该应用程序位于针对 iframe 的不同页面上，否则这是行不通的。无法跨 iframe 执行双向绑定。

你见过this post吗？

您可能会在how to make a div resizable 上发现这个问题很有用。

jQueryUI Draggable Widget

这里是 an example 的 ng-repeat 和 iframes

【参考方案1】：

您可以将 AngularJS 表添加到 iframe。支持仅限于 HTML5，但看起来像这样：

HTML

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

javascript

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

可以使用srcdoc 属性代替src 来指示您将为内容提供代码。当您使用srcdoc 时，也需要无缝；它告诉浏览器 iframe 的内容应该被视为网站的一部分，而不是嵌套的。不幸的是，这将触发样式更改，从而消除您首先想要 iframe 的全部原因（调整大小手柄消失）。此外，您必须将 css 文件和 javascript 文件注入 iframe - 这是不值得的。

我建议使用类似 jQuery UI 可调整大小的东西：https://jqueryui.com/resizable/

这是我用来测试控制 iframe 内容的小提琴。这是非常基本但准确地展示了它们实际上有多少麻烦：Fiddle

【讨论】：

但这不接受角度重复。感谢您调整大小。将尝试将其与 draggable 结合起来，看看会弹出什么

jquery 还是 iframe？

我使用 AngularJS 生成内容，而不是 jQuery

当然，但是你可以在 Angular 项目中使用 jQuery

我知道，我在其他地方使用 jQuery。我的观点是这个特定的内容是从 Angular 生成的，而不是 jQuery，所以我想将 Angular 生成的内容填充到 iframe 中