Clicking Back button in Chrome affects my Vue app in cross-origin iframe instead of original page

user_2558764 0
Viewed 469

So basically I'm building an Chrome Extension, and I append an iframe with my Vue app to mail.google.com page, and I do all of the routing inside my Vue app with vue-router.

Strange thing is, when I click the Back button in my browser (Chrome), it takes my Vue app in iframe one page back instead of doing that with parent page (mail.google.com).

How can I make it that clicking browser’s back button affect only parent page (mail.google.com) and not my Vue app in appended iframe?

vue-router vue.js html5-history iframe javascript
1 Answers

It turns out that loading an iframe with an address causes the history to update. Early testing says that something like this seems to work:

        <Iframe
            url={"#"}
            width="0px"
            height="0px"
            frameBorder="0"
            id="my-iframe"
            display="initial"
            position="absolute"
            style={{border: "none", display: "none", position: 'absolute', top: 0, left: 0}}
            onLoad={() => {
                const el = document.getElementById('my-iframe')
                if (!loaded) {
                    const svrHost = "https://my-host.com/iframe.html"
                    el.contentWindow.location.replace(svrHost);
                    setLoaded(true);
                }
            }}
        />

I would love to tell you where I found this, but I located hints on a number of websites and don't remember the sources.

user_9857640
Related