Update iframe in AngularJS

Question

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

Champion for figuring that out! Thanks for posting the solution. — user1135469
– user1135469, Commented Jun 1, 2014 at 22:59

user1135469 · Accepted Answer · 2014-06-01 03:30:10Z

1

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.

answered Jun 1, 2014 at 3:30

user1135469

1,02012 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Soubriquet Over a year ago

Nope. No error messages. I just updated my original post with my control.js code. $scope.things = data is definitely getting a new result from the database because the title is updating, and the embed link is also updating. I don't know why the iframe does not update though.

Soubriquet Over a year ago

Also, your plunker code only changes the frame once. Why is that? Shouldn't it be able to change back to the first frame if I click the button again?

user1135469 Over a year ago

It only changes the iFrame once 'cause that's how I programmed it...just to test. When you 'inspect element' of the iFrame what is the value of src? Is it what you expect? The new value?

Soubriquet Over a year ago

When I inspect element of the iframe before and after, the value of src remains the same.

user1135469 Over a year ago

Hmmm...that's weird..but you said things[0].name changes?

|

Soubriquet · Accepted Answer · 2014-06-02 06:44:53Z

1

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

answered Jun 2, 2014 at 6:44

Soubriquet

3,39010 gold badges43 silver badges52 bronze badges

Collectives™ on Stack Overflow

Update iframe in AngularJS

2 Answers 2

12 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related