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

Is it possible to update angularjs expressions inside of an iframe?

本文关键字：更新 angularjs 表达式 iframe 是否      更新时间：2023-09-26

所以...例如，我正在尝试将电子邮件"模板"拉入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>

所以在我们的索引.html（angularjs app）中，我们将表单元素绑定到 {{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 表达式进行评估...显示的只是{{身体}}，等等...

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

您可能缺少的是，从浏览器的角度来看，iframe 是一个单独的文档。因此，如果这个iframe应该运行AngularJS代码，你需要让它成为一个单独的AngularJS应用程序。

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

http://plnkr.co/edit/NZiKGZ9D99JyntLJ7Lxk

从浏览器的角度来看，angular 没有什么特别之处——这就是 JavaScript，这才是最重要的。所以我想说你的问题的答案是 - 是的，它应该有效。

当然，同源政策的限制将适用。异步性也可能会出现一些问题，但除此之外，它应该可以工作

相关文章：