CODEWITHSUNDEEP
javascriptjqueryhtmlangularjsiframe
Soubriquet
Soubriquet

Reputation: 3330

Update iframe in AngularJS

I'm trying to use AngularJS to update my iframe whenever a query is made. For example, a query is made, then the embed link is retrieved from the database. That link is then used in the iframe. The title and the video are then displayed. This part works for me so far. After that first query though, when I make another query, the iframe does not update, but the title does, so I know that the query is working fine, but there's something wrong with the iframe. How do I update my iframe?

If I do a search that returns one value followed by a search that has multiple results and then another search with a single result, the iframe does change. It changes from the second div to the first div and then back to the second div. So if there's a way to change the div between single searches, the second div can update. Does anyone know how I can do this?

<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>

Edit This is my 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);
            });
    };
    }

Another update: Resolved

Upvotes: 1

Views: 2649

Answers (2)

Soubriquet
Soubriquet

Reputation: 3330

So after randomly finding out that my code works in Firefox, but not Chrome, I did some searching. I found that the Facebook Disconnect plugin was blocking my iframes from rendering. https://productforums.google.com/forum/#!topic/chrome/e3eRJy3vXSM

Upvotes: 1

user1135469
user1135469

Reputation: 1020

I've made a Plunker that changes the first object in things on a button click and it seems to update the iFrame like expected.

Check your console and see if there is an error message when you try load the other src. Some sites like google set X-Frame-Options so that the site can't be accessed by your iFrame.

Upvotes: 1

Related Questions