Framework7: External hyperlink not opening in browser

Created on 14 Feb 2017  路  8Comments  路  Source: framework7io/framework7

I have used link and external class in the href tag but its not working. When I open the same in Chrome Dev Emulator it works fine but when I build an apk and install on device its not working.

<li class="accordion-item"><a href="#" class="item-content item-link">
    <div class="item-inner">
      <div class="item-title">Demo 1</div>
    </div></a>
  <div class="accordion-item-content">
    <div class="content-block">
      <p>Loremsum Ipsum</p>
     <p><a href="http://www.google.com" class="link external button button-raised button-fill color-blue">Demo</a></p>
    </div>
  </div>
</li>
outdated

Most helpful comment

It's Cordova related.

  1. Install latest version of cordova
  2. Don't miss to add
  <script src="cordova.js"></script>

to your index.html

  1. There is 2 way to launch external app:
  2. You can launch external app with javascript:

    • For IOS:

      javascript window.open("http://google.com", '_system')

    • For Android

      javascript navigator.app.loadUrl("http://google.com", {openExternal : true})

  3. Change config.xml variables like that and use links directly:
  <allow-intent href="http://*/*" launch-external="yes"/>
  <allow-intent href="https://*/*" launch-external="yes"/>

_Optional:_
If you want to open mailto: links external you should edit config.xml like that:

  <allow-intent href="mailto:*" launch-external="yes"/>

Some people says in-app-browser needs, but i think it's not required. You can install in-app-browser if it's not working at last.

All 8 comments

<a href="http://www.google.com" class="link external button button-raised button-fill color-blue" target="_blank">Demo</a>

@ZanderBrown Tried using class="external", still not working.

It's Cordova related.

  1. Install latest version of cordova
  2. Don't miss to add
  <script src="cordova.js"></script>

to your index.html

  1. There is 2 way to launch external app:
  2. You can launch external app with javascript:

    • For IOS:

      javascript window.open("http://google.com", '_system')

    • For Android

      javascript navigator.app.loadUrl("http://google.com", {openExternal : true})

  3. Change config.xml variables like that and use links directly:
  <allow-intent href="http://*/*" launch-external="yes"/>
  <allow-intent href="https://*/*" launch-external="yes"/>

_Optional:_
If you want to open mailto: links external you should edit config.xml like that:

  <allow-intent href="mailto:*" launch-external="yes"/>

Some people says in-app-browser needs, but i think it's not required. You can install in-app-browser if it's not working at last.

@centrual Hii, I tried changing the config.xml file as well as introducing the cordova.js file but it didn't work. I couldn't try the javascript one. Can you please elaborate how can I do it with JS, like with Href tags and JS code. Thanks in advance.

In the my-app.js I have used the code:
//open url
$$('.external').on('click', function (e) {
var url = $$(this).attr("href");
window.open(url, "_blank");

And in the HTML I have written
<a href="http://www.google.com" class="link external button button-raised button-fill color-blue">Demo</a>

When I used the chrome debugger I found that URL is capturing google.com, but the problem is with Window.open. We tried with _blank, _system and only URL, but I couldn't get it to run. @ZanderBrown

Solved the issue using InApp Browser Plugin. In JS have mentioned the device On Ready function and in the button Href tag, have opened the URL with window.open and keeping target as blank.

@alapanme could you possibly share the JS code you used that worked?

About not working in cross browser and in side panel can you please help. Thank you.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

J05HI picture J05HI  路  3Comments

l2aelba picture l2aelba  路  4Comments

J05HI picture J05HI  路  3Comments

mesutgok picture mesutgok  路  4Comments

ahmeddaif1 picture ahmeddaif1  路  4Comments