How to render a HTML page inside Phaser?

[Fenopiù]

Good morning guys!

 

I've to load a HTML page (rules, instructions, settings, ecc...) inside my Phaser game, how can I reach this goal?

Can I control that page with Phaser buttons?

Can I render some Phaser button inside this HTML to manage the settings?

 

I need that is a HTML or PHP page to be reachable  and visible even outside the game.

[alex_h]

stick an iframe in front of the game canvas and load the HTML into that.

[casey]

You may also find this tutorial on overlays useful: https://www.joshmorony.com/creating-a-shop-with-purchasable-items-in-a-phaser-game/

[Fenopiù]

What if, instead of a full HTML page, I've to render just a <div id="bla-bla-bla">content</div>  to render?

[alex_h]

If it is in the same page as your game then you can display it in front of the game canvas via css. You can show / hide via the display property, and place it in front of the canvas via position and z-depth properties.

[Fenopiù]

Thanks for the answer @alex_h.

No, it's in another page.

I've parsed the page as a string and substringed it in a variable.

Now, while I render the variable with

mydiv.innerHTML = mystring;

it render it full page.

I've tested cutting my HTML file to just the div that I want and render the full page with:

mydiv.innerHTML = "<object width=\"100%\" height=\"100%\" type=\"text/html\" data=\"" + myhtmlpage + "\" ></object>";

it render mydiv size.

How can I have the same result in the string version too?

 

Update:

The problem is that with the first method all divs in mystring have width 100% and height 100% instead of width and height of parent div (mydiv).

Edited March 1, 2018 by Fenopiù
Update info

[alex_h]

16 hours ago, Fenopiù said:

The problem is that with the first method all divs in mystring have width 100% and height 100% instead of width and height of parent div (mydiv).

What you are trying to do sounds very weird to me, but anyway, with width/height 100% that refers to 100% of the containing element. So as long as your parent div has fixed width and height then you shouldn't have a problem.

[Fenopiù]

On 2/3/2018 at 8:16 AM, alex_h said:

What you are trying to do sounds very weird to me, but anyway, with width/height 100% that refers to 100% of the containing element. So as long as your parent div has fixed width and height then you shouldn't have a problem.

The problem was that parent div has fixed width and height but the child div do not inherited them and had 100% innerwindow width and height without any reason.

Solved with a CSS rule... but in any tutorial I've saw says it is unnecessary because there it should be implicit inheritance.