Iframe embedded in Vue 3 component

[kumarimanjari]

Hi Team,
We have a problem in our Vue3 application. We are using Iframe to show HTML content. This HTML content is coming from backend after XSLT transformations and there are anchor tags present in this document.
We are writing the src to iframe using .write() method of Iframe. As this document has links, we are navigating withing the document and also it has a link to give call to backend to fetch the data and show in the context of Iframe.

Problem -> When we navigate between the links and click on Back Button of the browser, we see that new Vue instance is created and our application loads once more and nesting happens on the page.
Do you have any suggestion around this problem? If you need more information do let me know.

Thanks :)

[kumarimanjari]

Hi Team, does anyone have some hints/suggestions around this problem?

[kumarimanjari]

@yyx990803 - Could you please help me here

[so1ve]

You'd better provide a minimal reproduction to help people debug.

[kumarimanjari]

@so1ve - As of now it is not possible to share the code or details.
Problem - If back button of browser is clicked in Vue application where router is not implemented, it adds the main component to the App Component due to which we see the nesting of 2 components.
I can try to explain in points -

1. Access localhost:8080 -> Tree like structure is loaded in left part of the page which contains folders and files.
2. Click on files -> This will load a document on right side in an Iframe. This document is coming from Backend response after applying XSLT transformations to it. This document contains anchor tags which navigates to the different part of the document as well as some links give backend call to fetch the data and show in the same right part.
3. After clicking on different anchor tags/links user clicks the back button of the browser. As soon as this happens, another whole tree structure is added next to the existing tree structure. This will continue until you see 3-4 Tree structure present in the page.

Let me know if this helped you in anyway. :)

[ps-20x]

You don't need to share the code of your application but just a minimal reproduction where you have a page and an iFrame. So people can have a look and see and check out the problem.

Is this connected to your question and answers it already? vuejs/vue-router#3265