Monaca Onsen UI Discord Chat Github Repo

Ons-tab tabbar element loading external site



  • Hi, I’m trying to load an external html file in an ons tab-bar, something like:

    <ons-tab label=“Map” icon=“fa-map-o” page=“https://example.com/mapSearch.html” id=“tab3”></ons-tab>

    If I host the mapSearch.html locally everything works as expected, but I’m using a google maps API key which I need to restrict with a specific referer, so I need to source the mapSearch.html from a specific domain. Any ideas on how could I achieve this?

    Thanks!


  • administrators

    Onsen UI uses XMLHttpRequest internally to load pages. For browser security reasons, you can’t load a page with a different origin using this method. That explains why you were able to load a page hosted on the same server as your app but not on a different server. More details here: https://en.wikipedia.org/wiki/Same-origin_policy

    Can you provide some more details about what you’re trying to do so we can recommend you a solution? For example, if you’re just trying to open the Google Maps app, that’s pretty straightforward to do (just make a link with the geo URI).



  • Sorry, I should’ve been more clear. When I mean locally, I mean that my mapSearch.html is inside my cordova’s folder, and not hosted on a remote server. Whatever remote server url I use, it wont load. I hope that makes the problem clearer.


  • administrators

    Yes, that’s what I’m saying, that a remote server URL won’t work because of security restrictions in the browser. However, anything hosted in your cordova folder should work.