How to refresh iframe url?

Question

I am creating an app using ionic in which I am displaying a URL using iframe. This is the HTML code:

  <iframe id="myFrame" width="100%" height={{iframeHeight}}>

This is the angular js:

 $scope.iframeHeight = window.innerHeight;
                        document.getElementById("myFrame").src = value['url'];

Everything is working, however when I make changes on the site from the backend and refresh the app the new changes are not appearing in the app.

Solution 1

The thing you are doing in your code is not a valid way of doing it. You are manipulating DOM using native method that will not run digest cycle, you need to run it manually by doing $scope.$apply(). That will solve your problem but generally you should not do DOM manipulation from controller which is considered as BAD practice. Rather I'd suggest you to use angular two way binding feature. Assign url in scope scope variable and add that on iframe tag using ng-src="{{url}}" so that src URL will be updated by angular and as url get updated iframe will load content from src URL in it.

HTML

<iframe id="myFrame" width="100%" ng-src="{{url}}" height={{iframeHeight}}>

Code

$scope.url = "http://example.com"

As you change scope variable in the controller the the src of iframe will also gets change and iframe will reload the content.

Update

To solve caching issue you need to append current date time to you url that will every time make a new URL and it won't be cached by the browser. Something like $scope.url = "http://example.com?dummyVar="+ (new Date()).getTime() by using this it will never harm your current behavior, only you need to append dummyVar with current time value which would be always unique.

$scope.url = "http://example.com?dummyVar="+ (new Date()).getTime()

Solution 2

Refreshing didn't work for me with timestamp as in Pankaj Parkar's answer, so I solved it in a bit of a hacky way, which just toggles ng-if element off and on again, and forces iframe to load.

Template:

<iframe ng-if="!vm.isRefreshing"></iframe>

Controller:

refreshIframe() {
    this.isRefreshing = true;

    $timeout(() => {
        this.isRefreshing = false;
    }, 50);
}

Solution 3

As @pankajparkar suggested in his answer, I'd suggest you using angular 2-way data binding.

In addition to that, you need to wrap the urls with $sce.trustAsResourceUrl function in order to your iframe to work.

<iframe id="myFrame" width="100%" ng-src="{{url}}" height={{iframeHeight}}>

And

$scope.url = $sce.trustAsResourceUrl("http://example.com");

Comments

[Test user]

HI Bro it is not working i.e. not updating the changes. is there any way to clear cache

[Test user]

HI Bro it is not working i.e. not updating the changes. is there any way to clear cache

[Test user]

sorry i have no idea about this two if you give your mail id i can share the code

[Muhammad Reda]

you'll find my email in my profile page, at the end of about me section.

[Muhammad Reda]

Using plunker and js.fiddle is not that hard. Give it a try. Plunker: plnkr.co/edit and JsFiddle: jsfiddle.net

[Pankaj Parkar]

@MunavvarFairoos look at updated answer...that will avoid caching of url with data by making unique url just by appendend time to it in query param

[Test user]

Hi brother i found that the above code is working fine in ios devices but it is not working in android

[Pankaj Parkar]

use data-ng-src instead of ng-src

[Test user]

hi bro no luck still same result

[Test user]

Thanks a lot brother for your valuable time. and finally i fixed added github.com/moderna/cordova-plugin-cache.git this plugin and removed the cache then it woking fine

[Test user]

Thanks a lot brother for your valuable time. and finally i fixed added github.com/moderna/cordova-plugin-cache.git this plugin and removed the cache then it woking fine

[BelgoCanadian]

Your "Caching update" was what I was missing. Thanks a million!