在 AngularJS 中更新 iframe答案

【问题标题】：Update iframe in AngularJS在 AngularJS 中更新 iframe
【发布时间】：2014-07-21 11:55:32
【问题描述】：

每当进行查询时，我都会尝试使用 AngularJS 来更新我的 iframe。例如，进行查询，然后从数据库中检索嵌入链接。然后在 iframe 中使用该链接。然后显示标题和视频。到目前为止，这部分对我有用。但是，在第一次查询之后，当我进行另一个查询时，iframe 不会更新，但标题会更新，所以我知道查询工作正常，但是 iframe 有问题。如何更新我的 iframe？

如果我执行的搜索返回一个值，然后是具有多个结果的搜索，然后是具有单个结果的另一个搜索，则 iframe 确实会发生变化。它从第二个 div 变为第一个 div，然后返回到第二个 div。因此，如果有办法在单个搜索之间更改 div，则第二个 div 可以更新。有谁知道我该怎么做？

<div ng-if="things.length>1">
   <div ng-repeat="thing in things">
     <li><a <a href="{{ thing.name }}">{{ thing.name }} </a></li>
    </div>
</div>
<div ng-if="things.length==1" class="col-sm-4 col-sm-offset-4">
   <h1> {{ things[0].name }} </h1>
   <iframe width="560" height="315" ng-src="{{ things[0].embed }}" frameborder="0"allowfullscreen></iframe>
</div>

编辑这是我的 control.js。

var coreControl = angular.module('myCore', []);

function mainController ($scope, $http, $sce) {
    $scope.formData = {};
    $scope.things   = [];

    $http.get('/*')
        .success(function(data) {
            $scope.things = data;
            console.log(data);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });

    $scope.search = function() {
        $http.post('*', $scope.formData)
            .success(function(data) {
                $scope.formData = {};
                $scope.things    = data;
                $scope.things[0].embed = $sce.trustAsResourceUrl($scope.things[0].embed);

                console.log(data);
            })
            .error(function(data) {
                console.log('Error: ' + data);
            });
    };
    }

另一个更新：已解决

【问题讨论】：

冠军为解决这个问题！感谢您发布解决方案。
哈哈。感谢您的帮助！

标签： javascript jquery html angularjs iframe

【解决方案1】：

我创建了一个Plunker，通过单击按钮更改things 中的第一个对象，它似乎像预期的那样更新了iFrame。

检查您的控制台，看看当您尝试加载其他 src 时是否有错误消息。一些网站，如 google 设置X-Frame-Options，这样您的 iFrame 就无法访问该网站。

【讨论】：

不。没有错误信息。我刚刚用我的 control.js 代码更新了我的原始帖子。 $scope.things = data 肯定是从数据库中获得了新的结果，因为标题正在更新，嵌入链接也在更新。我不知道为什么 iframe 没有更新。
另外，您的 plunker 代码只更改一次框架。这是为什么？如果我再次单击按钮，它是否应该能够变回第一帧？
它只更改 iFrame 一次，因为我就是这样编程的……只是为了测试。当您“检查 iFrame 的元素”时，src 的值是多少？这是你所期望的吗？新价值？
当我在前后检查 iframe 的元素时，src 的值保持不变。
嗯......这很奇怪......但你说things[0].name改变了？

【解决方案2】：

所以在随机发现我的代码在 Firefox 中有效，但在 Chrome 中无效后，我进行了一些搜索。我发现 Facebook Disconnect 插件阻止了我的 iframe 渲染。 https://productforums.google.com/forum/#!topic/chrome/e3eRJy3vXSM

【讨论】：