是否可以在 iframe 中更新 angularjs 表达式？
Posted
技术标签:
【中文标题】是否可以在 iframe 中更新 angularjs 表达式？【英文标题】：Is it possible to update angularjs expressions inside of an iframe? 【发布时间】：2013-10-08 04:29:09 【问题描述】：所以...例如，我试图将电子邮件“模板”拉入 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" ></iframe>
</div>
这可能吗？ angularjs 是否可以更新该信息，如果可以，如何更新？我有类似的设置，似乎它不起作用。我无法让 angularjs 表达式进行评估...所有显示的是 body 等...
【问题讨论】：
【参考方案1】：如果您从同一个域名运行 iframe 和父文档（这样就不会应用跨站点脚本限制），那么您可以在 iframe 中调用 javascript 函数来传递数据。
您可能缺少的是，从浏览器的角度来看，iframe 是一个单独的文档。因此，如果这个 iframe 应该运行 AngularJS 代码，则需要将其设为单独的 AngularJS 应用程序。
这是一个示例，其中父文档和 iframe 都是单独的 AngularJS 应用程序，并且父文档中输入的文本值在更改时发送到 iframe，在那里运行的 AngularJS 应用程序会将数据放入范围。
http://plnkr.co/edit/NZiKGZ9D99JyntLJ7Lxk
【讨论】：
正是我想要的。我想我只是不确定 Angularjs 是否进行了一些后台处理并在默认情况下在其范围内包含了额外的视口。这可以解决问题，感谢 plnkr...非常清楚。 我也想要这样的东西，但我的情况正好相反。我想从 iframe 更新页面数据。有可能吗？ 是的，在这种情况下，您只需要从 iframe 中引用父页面即可。我没有查过，但是类似 window.parent 的东西应该可以工作。 出于存档目的：从 iframe 调用父函数只需执行 parent.someChildsFunction(); （来自***.com/questions/18437594/…）【参考方案2】：从浏览器的角度来看，Angular 没有什么特别之处——这是 javascript，这才是最重要的。所以我会说你的问题的答案是 - 是的，它应该工作。
当然，同源策略的约束将适用。异步性也可能会带来一些问题，但除此之外它应该可以工作
【讨论】：
我想我不是在问它是否会工作......我是在问怎么做......我基本上有一个更复杂的版本，我描述的地方，表达式不是在 iframe 内部进行评估...如果您知道如何做，请随时进一步解释。 好吧，无论你做什么，如果你想让它的魔力在那里工作，你需要让 iframe 也成为一个 AngularJS 应用程序/实例。父窗口也可以是 AngularJS 应用程序，但它始终是一个单独的应用程序。您需要在两个实例之间传递数据，另请参见我的示例。以上是关于是否可以在 iframe 中更新 angularjs 表达式？的主要内容，如果未能解决你的问题，请参考以下文章
如何下载在 AngularJS 中开发的呈现 iframe 的网页作为 PDF 文件？