Adding the ability to inject websites directly inside maps
This PR adds the ability to inject a website INSIDE a map (as an iframe inside a Phaser HTML object) The iFrame will be rendered transparently, unless you set a background-color on the body, which opens a number of cool possibilities. Needs to be done: allowing the iframe API in those iframes.
This commit is contained in:
parent
a09f27b448
commit
ce3c53ae3f
7 changed files with 207 additions and 5 deletions
24
docs/maps/website-in-map.md
Normal file
24
docs/maps/website-in-map.md
Normal file
|
@ -0,0 +1,24 @@
|
|||
{.section-title.accent.text-primary}
|
||||
# Putting a website inside a map
|
||||
|
||||
You can inject a website directly into your map, at a given position.
|
||||
|
||||
To do this in Tiled:
|
||||
|
||||
- Select an object layer
|
||||
- Create a rectangular object, at the position where you want your website to appear
|
||||
- Add a `url` property to your object pointing to the URL you want to open
|
||||
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<img src="https://workadventu.re/img/docs/website_url_property.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
|
||||
<figcaption class="figure-caption">A "website" object</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
The `url` can be absolute, or relative to your map.
|
||||
|
||||
{.alert.alert-info}
|
||||
Internally, WorkAdventure will create an "iFrame" to load the website.
|
||||
Some websites forbid being opened by iframes using the [`X-Frame-Options](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options)
|
||||
HTTP header.
|
Loading…
Add table
Add a link
Reference in a new issue