Vue.js page inside iframe not showing on Firefox

Question

We have a Vue.js page contains a Echarts pie draft, and we want to show it in another project, which is using jQuery.
It shows perfectly both on Chrome and IE, but on Firefox there's nothing showing.
We tried to replace the Echarts page with some basic numbers in the template, but it's still empty in Firefox.

This is what it looks like in chrome:


And this is Firefox, which only has an empty app tag:

Any help would be appreciated.


edit:
I'm using Firefox93 on 64bit, there are no errors showing in the console.
This is how we inserted the iframe:

Answer 1

Is the website you're trying to load the iframe in secure (https)? I see you're trying to iframe an http url

Unlike HTTP images in an HTTPS page, which are allowed through with a little warning on the padlock, iframes are considered potentially dangerous active content and HTTP iframes won't be loaded into an HTTPS page.

Besides that the same-origin policy might have something to do with it

Answer 2

When it comes to several browsers is working well, and when opened in another browser it has something wrong, It should be the Web API or Browser API used by the library, in this case, VueJS.

The possible solutions from the estimated source of the problem are:

1. Update the VueJS to the latest version.
2. I hope this forum is useful: https://forum.vuejs.org/t/iframes-in-vue/102268, the questionnaire has a problem with its source link. But I think you are not experiencing this. And it is useful for anyone who visited this question.
3. If the problem is to be solved, I recommended using other people's custom libraries, like this: https://www.npmjs.com/package/vue-iframes. Because those libraries are developed to answer several problems that the creator facing that probably other people would be experiencing too.