Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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.