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

Question

So...for example, I am trying to pull in an email "template" into an iframe as a "preview" for the user inside of an angularjs app. 所以...例如，我试图将一个电子邮件“模板”拉入iframe作为angularjs应用程序内部用户的“预览”。 The iframe lives inside of the controller area (let's call it MainCtrl). iframe位于控制器区域内（让我们称之为MainCtrl）。 The user would then be able to, using the form elements provided inside MainCtrl, update the preview based on their input. 然后，用户可以使用MainCtrl中提供的表单元素，根据他们的输入更新预览。 So for example let's say our template being pulled into the iframe looks something like this: 例如，假设我们将模板拉入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>

So inside our index.html (angularjs app), we would have form elements bound to {{header}} and {{body}}... 因此，在我们的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>

is that possible? 那可能吗？ Is it possible for angularjs to update that information, and if so, how? angularjs是否可以更新该信息，如果是，如何更新？ I have something similar setup, and seems that it will not work. 我有类似的设置，似乎它不会工作。 I cannot get the angularjs expressions to evaluate...all that shows up is {{body}}, etc... 我无法得到angularjs表达式来评估...显示的所有内容都是{{body}}等等......

Answer 1

If you run the iframe and the parent document from the same domain name (so that no Cross-Site-Scripting-Restrictions apply) then you can call a JavaScript function in the iframe which you could pass data. 如果您运行iframe和来自相同域名的父文档（以便不应用跨站点脚本限制），那么您可以在iframe中调用可以传递数据的JavaScript函数。

What you might be missing is that the iframe is a separate document from the viewpoint of the browser. 您可能缺少的是iframe是一个单独的文档，从浏览器的角度来看。 So if this iframe should run AngularJS code, you will need to make it a separate AngularJS application. 因此，如果此iframe应运行AngularJS代码，则需要将其作为单独的AngularJS应用程序。

Here is a example where both the parent document and the iframe are separate AngularJS applications and the value of a text input in the parent is sent upon change to the iframe where the AngularJS application running there will put the data into the scope. 下面是一个示例，其中父文档和iframe都是单独的AngularJS应用程序，父级中的文本输入值在更改为iframe时发送，其中运行的AngularJS应用程序将数据放入范围。

http://plnkr.co/edit/NZiKGZ9D99JyntLJ7Lxk http://plnkr.co/edit/NZiKGZ9D99JyntLJ7Lxk

Answer 2

From the standpoint of the browser there is nothing special about angular - this is javascript, that's all that matters. 从浏览器的角度来看，角度没什么特别的 - 这是javascript，这一切都很重要。 So I would say the answer to your questions is - yes, it should work. 所以我会说你的问题的答案是 - 是的，它应该有效。

Of course the constrains of the same origin policy will apply. 当然，同一原产地政策的约束将适用。 Also asynchronicity may present some problems, but other than that it just should work 异步性也可能存在一些问题，但除此之外它应该起作用

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

问题描述

2 个解决方案

解决方案1
12 已采纳 2013-10-01 21:30:34

解决方案2
0 2013-10-01 21:07:36

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

问题描述

2 个解决方案

解决方案1 12 已采纳 2013-10-01 21:30:34

解决方案2 0 2013-10-01 21:07:36

解决方案1
12 已采纳 2013-10-01 21:30:34

解决方案2
0 2013-10-01 21:07:36