How to display game without full html page?

I have a requirement display a game build with Cocos Creator within a DIV tags.

I don’t have access to the full html page.

I can put content that are within the body tag of index.html file inside the DIV tag.
But I can not put content that are in header tag to the page.

I can do this by using an iFrame.

Is there a way to achieve this without using an iFrame ?

1 Like

If you dont have access, what you’re trying to do is not possible for you. Use iframe and be happy :grin:

I tried the following …
The game has to display with in main div tags

<div id="main" class="content" >
 <canvas id="GameCanvas" oncontextmenu="event.preventDefault()" tabindex="0">
</canvas>
 </div>

I then dynamically attach “settings.js” and “main.js” files to the page.
I didn’t attach any styles to the page.

This approach did work and the game work successfully.

But

I wanted to build the mobile version of the game needs to work on both landscape and portrait mode.
The problem I have is, the game adjust correctly in landscape mode but in portrait mode it does not rotate and scale correctly.

When the game is in portrait mode width and height of main div tag has correct width and height.

<div id="main" class="content" style="width:361px;height:741px;
position: absolute;left: 0%;top: 0px;overflow: hidden;background: #000000;">
</div>

But Cocos2dGameContainer width and height is not set correctly. I only set the width and height of main div tag. I assume Cocos2dGameContainer will get set accordingly.
But it is not getting set. also note the rotate is set to 0 deg. Which is wrong.

<div id="Cocos2dGameContainer" style="transform: rotate(0deg); width: 361px; height: 203px; margin: 0px; padding: 269px 0px;"></div>

Can anyone suggest a solution for this?

How does styles of Cocos2dGameContainer getting set?

Is there a style tag I have to include to get this working correctly?
At the moment I haven’t included any styles from cocos game.