gpt4 book ai didi

javascript - 是否可以更新 iframe 内的 angularjs 表达式?

转载 作者:太空狗 更新时间:2023-10-29 13:42:48 25 4
gpt4 key购买 nike

所以...例如,我试图将电子邮件"template"拉入 iframe 作为 angularjs 应用程序内部用户的“预览”。 iframe 位于 Controller 区域(我们称之为 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 应用程序)中,我们会将表单元素绑定(bind)到 {{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}} 等...

最佳答案

如果您从同一域名运行 iframe 和父文档(这样就不会应用跨站点脚本限制),那么您可以调用 iframe 中的 JavaScript 函数,您可以传递数据。

您可能不知道,从浏览器的 Angular 来看,iframe 是一个单独的文档。因此,如果此 iframe 应运行 AngularJS 代码,则需要将其设为单独的 AngularJS 应用程序。

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

http://plnkr.co/edit/NZiKGZ9D99JyntLJ7Lxk

关于javascript - 是否可以更新 iframe 内的 angularjs 表达式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19125910/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com