是否可以在iframe中更新angularjs表达式？

一尘不染

是否可以在iframe中更新angularjs表达式？

angularjs

所以…例如，我正在尝试将一个电子邮件“模板”引入iframe中，作为angularjs应用程序内用户的“预览”。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}}，依此类推…

阅读 165

2020-07-04

共1个答案

一尘不染

如果您从相同的域名运行iframe和父文档（因此不适用跨站点脚本限制），则可以在iframe中调用JavaScript函数，以传递数据。

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

这是一个示例，其中父文档和iframe都是单独的AngularJS应用程序，并且在更改到iframe时将发送父文档中输入的文本的值，在iframe中，在那里运行的AngularJS应用程序会将数据放入合并范围。

http://plnkr.co/edit/NZiKGZ9D99JyntLJ7Lxk

2020-07-04