HTML5 - How to open external link

Beta Testing HTML5
1

Hello, this is the first time I use HTML5 build and I don’t know how to add external link? I want to redirect players to another website if they click a button. I found only this example:

function visitWebsite(event) if ( event.phase == "ended" ) then     system.openURL( "http://example.com" ) end buttonGames:addEventListener("touch", visitWebsite);

Now, if I test the game in simulator and I click the button, it redirects me to the website.

But if I test it in browsers, it’s blocked by popup blockers. I tried Chrome, FIrefox and Opera.

Error: Failed not open

http://example.com

Try to disable popup blockers

I create HTML5/JS games and I can open links in a new tab without any problems

function visitWebsite() {     window.open("http://example.com", "\_blank"); }
2

This sounds like an opportunity to create a JS based plugin.  You just need to create an extra .lua file and a .js file in your project and write your JS based function.  You might want to look over these two docs:

https://gist.github.com/Shchvova/ab54ec1d32eb408d226f533eb775deee

https://coronalabs.com/blog/2018/03/22/making-html5-plugins-for-corona/

You can also look for posts from @develephant in this forum where he’s shared several plugins to see source for some other examples.

Rob

3

Hi,

In this case I don’t think a plugin will help. Most browsers default to blocking JavaScript initiated popup windows. The user must specifically choose to allow a window to be opened via JS.

-dev

4

As I already said, I use this code in about 20 HTML5 games and it works in all browsers (desktop and mobile).

You must click a button and then open a link in a new tab:

function visitWebsite()
{
    window.open("http://example.com", “_blank”);
}

They block some other popup windows, but this is ok, at least for now.

Regards

5

Hi,

Yes, that works because the user is initiating the action by clicking the button.

Corona HTML5 is based on WebGL, so you are not actually clicking a DOM based button. Instead a JavaScript action is being called by the compiled Corona HTML5 app, this will result in a blocking of the new window by most major browsers by default.

The only work-around I can suggest is using the modal plugin and open your window from a button in that content since that is a true DOM based button outside of the WebGL context.

https://develephant.github.io/corona-html5-modal-plugin/

Code example:

local widget = require("widget") local modal = require("modal") --############################################################################# --# Code --############################################################################# local html = [[\<h1\>Window Open\</h1\> \<div\> \<button onclick="window.open('https://google.com', target='\_blank')"\>Open Window\</button\> \</div\>]] modal.create({ width = 360, height = 130, padding = 6, content = html }) modal.addEventListener(function(e) print(e.type) end) local function toggleModal() modal.toggle() end --############################################################################# --# UI --############################################################################# local toggleBtn = widget.newButton({ label = "Toggle", x = display.contentCenterX, y = display.contentCenterY + 80, onRelease = toggleModal })

-dev

6

I don’t know how Corona HTML5 works, but my games use WebGL and I have no problems. If I use “modal” I can open links in a new tab, and I use images instead of <button>. It works, but I cannot scale this new html content, it does not fit the game.

I will also try Rob’s suggestion.

7

This sounds like an opportunity to create a JS based plugin.  You just need to create an extra .lua file and a .js file in your project and write your JS based function.  You might want to look over these two docs:

https://gist.github.com/Shchvova/ab54ec1d32eb408d226f533eb775deee

https://coronalabs.com/blog/2018/03/22/making-html5-plugins-for-corona/

You can also look for posts from @develephant in this forum where he’s shared several plugins to see source for some other examples.

Rob

8

Hi,

In this case I don’t think a plugin will help. Most browsers default to blocking JavaScript initiated popup windows. The user must specifically choose to allow a window to be opened via JS.

-dev

9

As I already said, I use this code in about 20 HTML5 games and it works in all browsers (desktop and mobile).

You must click a button and then open a link in a new tab:

function visitWebsite()
{
    window.open("http://example.com", “_blank”);
}

They block some other popup windows, but this is ok, at least for now.

Regards

10

Hi,

Yes, that works because the user is initiating the action by clicking the button.

Corona HTML5 is based on WebGL, so you are not actually clicking a DOM based button. Instead a JavaScript action is being called by the compiled Corona HTML5 app, this will result in a blocking of the new window by most major browsers by default.

The only work-around I can suggest is using the modal plugin and open your window from a button in that content since that is a true DOM based button outside of the WebGL context.

https://develephant.github.io/corona-html5-modal-plugin/

Code example:

local widget = require("widget") local modal = require("modal") --############################################################################# --# Code --############################################################################# local html = [[\<h1\>Window Open\</h1\> \<div\> \<button onclick="window.open('https://google.com', target='\_blank')"\>Open Window\</button\> \</div\>]] modal.create({ width = 360, height = 130, padding = 6, content = html }) modal.addEventListener(function(e) print(e.type) end) local function toggleModal() modal.toggle() end --############################################################################# --# UI --############################################################################# local toggleBtn = widget.newButton({ label = "Toggle", x = display.contentCenterX, y = display.contentCenterY + 80, onRelease = toggleModal })

-dev

11

I don’t know how Corona HTML5 works, but my games use WebGL and I have no problems. If I use “modal” I can open links in a new tab, and I use images instead of <button>. It works, but I cannot scale this new html content, it does not fit the game.

I will also try Rob’s suggestion.