在 iframe 中更新 AngularJS 表达式是否可行？

Question

在 iframe 中更新 AngularJS 表达式是否可行？

8

比如说，我正在尝试将一个电子邮件“模板”作为用户的“预览”引入到AngularJS应用程序中的iframe中。该iframe位于控制器区域内（我们称之为MainCtrl）。然后，用户可以使用MainCtrl提供的表单元素根据其输入更新预览。例如，假设我们引入到iframe中的模板看起来像这样：

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style type="text/css">
    .some {styles: here};
    </style>
</head>

<body>
    <h1>{{header}}</h1>

    <p>{{body}}</p>

</body>

</html>

在我们的index.html文件中（AngularJS应用程序），我们会有绑定到{{header}}和{{body}}的表单元素...

<div ng-controller="MainCtrl">
    <input type="text" ng-model="header" placeholder="header text" />
    <input type="text" ng-model="body" placeholder="body text" />
    <iframe src="template.html" width="800" height="1500"></iframe>
</div>

这是否可能？AngularJS能否更新这些信息，如果可以，应该如何更新？我有类似的设置，但似乎无法正常工作。我无法使AngularJS表达式计算...只有{{body}}等内容显示出来...

- kevindeleon

2个回答

0

从浏览器的角度来看，Angular 没有什么特别之处 - 它只是 JavaScript。所以我会说，对于你的问题，答案是 - 是的，它应该可以工作。

当然，同源策略的限制将适用。此外，异步性可能会带来一些问题，但除此之外，它应该可以正常工作。

- mfeingold

我猜我并不是在询问它是否可行...我正在询问如何做到这一点...我基本上有一个更复杂的我所描述的东西，并且表达式没有在 iframe 内计算...如果你知道如何做，请随意进一步解释。 - kevindeleon

无论你做什么，如果你想让iframe的魔力在那里发挥作用，你也需要将它变成一个AngularJS应用程序/实例。父窗口也可以是一个AngularJS应用程序，但它始终是一个独立的应用程序。你需要在两个实例之间传递数据，参见我的示例。 - Juliane Holzt

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Juliane Holzt · Accepted Answer

如果您从相同的域名下运行iframe和父文档（这样就没有跨站点脚本限制），则可以调用iframe中的JavaScript函数，并且您可以传递数据。

您可能会忽略的是，从浏览器的角度来看，iframe是一个单独的文档。因此，如果这个iframe应该运行AngularJS代码，您需要将其作为单独的AngularJS应用程序。

以下是一个示例，其中父文档和iframe均为单独的AngularJS应用程序，并且将父文档中文本输入框的值在更改时发送到iframe，而在那里运行的AngularJS应用程序将把数据放入作用域中。

http://plnkr.co/edit/NZiKGZ9D99JyntLJ7Lxk