0

I want to embed HTML content into a div. To achieve this I have a static fileserver serving the requested index.html file.

For the sake of simplicity and reproduction the whole code (paths etc.) is hardcoded

First my static file server serving the base index.html file and the subApp that should be rendered within a container of the base app.

const express = require('express');
const path = require('path');
const app = express();
const router = express.Router();

app.use(express.static(__dirname));

router.get('/subApp', function(req, res) {
    res.sendFile(path.join(__dirname, 'subApp.html'));
});

router.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'base.html'));
});

app.use('/', router);

app.listen(3000);

The base app only ships a container that requests a specific app.

<div>
  <object style="width: 100%; height:100%;" data="http://localhost:3000/subApp"></object>
</div>

The requested sub app tries to manipulate the browser url when jumping to an element

<a href="#containerTwo">Jump to</a>
<div style="width: 100%;height: 5000px; background:red;">Div One</div>
<div style="width: 100%;height: 100px; background:blue;" id="containerTwo">Div Two</div>

When jumping to the blue container the URL won't change. But I would expect it adds #containerTwo to the url.

Is that even possible?

I'm asking this because my real app embedds client-side rendered VueJs apps and when navigating through the sub app using the Vue Router the browser URL never updates.


A possible solution for this problem could be this answer. It worked for simple HTML files but not for Vue apps.

https://stackoverflow.com/a/55209788/9945420

1 Answer 1

1

Object element is kind of sandboxing the content showed there.

You can pass messages to parent container but it has to accept it. Does it means you need to get the message passed from that object and manipulate the parent container url (check the security concerns of that, just using '*' here)

Send a message event from sub app:

<!-- subApp -->
<a href="#containerTwo" onclick="changeParentUrl(this)">Jump to</a>
<div style="width: 100%;height: 5000px; background:red;">Div One</div>
<div style="width: 100%;height: 100px; background:blue;" id="containerTwo">Div Two</div>
<script>
    function changeParentUrl(link) {
        console.log(link.hash);
        this.parent.postMessage({ hash: link.hash }, '*');
    }
</script>

And then in your base app listen for that message event

<!-- base app-->
<object style="width: 100%; height:100%;" data="./subApp.html"></object>
<script>
    window.addEventListener('message', event => { window.location.hash = event.data.hash });
</script>

You can check the postMessage API https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

4
  • Thanks for your reply. Do you know alternatives to load a html file into a div? Maybe there is a better solution :)
    – user9945420
    Oct 9, 2019 at 11:10
  • Hmm found a working solution here stackoverflow.com/a/55209788/9945420 Worked for plain HTML files but not for Vue apps..
    – user9945420
    Oct 9, 2019 at 11:59
  • You can also 'embed' html files using iframe but it runs with the same communication/sandboxing issues. Maybe, as you say you're working with Vue, you can try to componentize that subApp and use it in a main Vue component. In this way, both main and subapp, will live in the same HTML. I'm not so familiar with Vue but there are plenty of tutorials out there creating apps and using components scotch.io/tutorials/build-a-to-do-app-with-vue-js-2
    – jmtalarn
    Oct 9, 2019 at 12:10
  • hm yes, but Plain HTML, HTML with Jquery, React and Angular should work too so I have to go this way .. :/
    – user9945420
    Oct 9, 2019 at 12:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.