Many people mention the poor performance of iframes when discussing them, but this is actually a minor drawback.
Because when you actually use iframes, you're often not concerned about performance, but rather: you have to use iframes. Since that's the case, you have to accept their existence; when necessary, you still have to use them.
In my company's business, the biggest problem we encountered using iframes was:
A page using multiple iframes resulted in a bug where you couldn't go back or forward.
Problem scenario: An application directory page collected a large number of company applications, all in one, encompassing all the company's business systems. Each application was opened using tabs within a webpage.
For example, in a web page, iframe1 opens the daily report system, iframe2 opens the financial system, and iframe3 opens the email system.During page usage, as the user interacts with each iframe, changes in the URL within the iframe cause the iframe to navigate forward and backward. Ultimately:
The user discovers that sometimes the interface cannot return to previous pages.
The path to reproducing this bug is to open all three iframes, navigate forward a few pages in each iframe, and then randomly switch to another iframe. It's found that `history.back()` / `history.go(-1)` in the iframes does not return to previous pages; clicking the back button has no effect…
This bug is currently unsolvable and is a fatal flaw for user experience.
If you encounter issues with Vue or Vue-router where you cannot navigate back or forward, it's likely due to this iframe navigability bug. If you encounter an issue where this.$router.back() , this.$router.forward() , or window.history.back() are executed, but going back or forward has no effect, it's likely that a page has multiple iframes, and all of these iframes have page forward and back functionality. The browser's history stack is malfunctioning, causing the inability to go back or forward.
Necessary Conditions for the Inability to Go Back or Forward
- A webpage uses multiple iframes.
- Multiple iframes have page forward and back functionality (at least two iframes).
Meeting these conditions will cause the forward/backward bug.
A page with only one iframe will not encounter the inability to go back or forward.
Developers should carefully consider the use of iframes.