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.