When I use iframe in ion content, src does not work

ionic-v1
1

Hello
I’m newbie for ionic v1

<ion-view title="{{maps.name}}" id="page14">
  <ion-content padding="true" class="has-header">
    <iframe src="{{maps.blog}}" width="%100" height="400"></iframe>
     
    <div id="tutorial-markdown9" class="show-list-numbers-and-dots">
      <p style="color:#000000;">{{maps.description}}</p>
    </div>
  </ion-content>
</ion-view>

this is my tutorial.html. However, I couldn’t get maps.blog. how can i show maps.blog in iframe src ?

2

Try whitelist url present in maps.blog

1 Like
3

Thank you for your help :slight_smile:

4

Did this resolve the problem? What did you have to do to fix it?

5

Hi my friend,

code thinks the url’s which are in {{maps.blog}} are dangerous. so at app.js

.config(function($ionicConfigProvider, $sceDelegateProvider){

  $sceDelegateProvider.resourceUrlWhitelist([ 'self','*://www.youtube.com/**', '*://player.vimeo.com/video/**', '*://www.google.com/maps/**']);

})

I added google.com/maps. So I could observe at " ionic serve --lab"

However, when i test my app on my iphone device. I couldnt see the maps.

6

For the iphone, you will have to do something similar with the Cordova Whitelist plugin. See here: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/