Is there any way to know when the page fetching is done?

[sangdth]

It could be great if we could have something like this:

<vue-friendly-iframe
    :src="path/to/external.com"
    @finish="handleLoading"
/>

methods: {
    handleLoading() {
        console.log('External link loaded. Do something');
    }
}

[officert]

Added a load event when the iframe loads:

https://github.com/officert/vue-friendly-iframe/releases/tag/0.11.0

<vue-friendly-iframe :src="iframeSrc" @load="onLoad"></vue-friendly-iframe>

[sangdth]

Sorry, maybe I misunderstood or something. I have checked the code and tried the @load but it seems to check only when the iframe loaded, not the content of iframe (link to the site) is loaded completely.

On my side, the onLoad get triggered way too fast, because my client use Wordpress as external links, and it takes more than 3 seconds to complete the loading.

[officert]

Hmm yea the load event is trigger using the iframe's onload method. I don't believe there's a way to tell if an iframe's content has fully loaded. Not without something in the iframe message the outer page that it has finished loading, which isn't possibly with a library like this where we don't control the inner page.

[sangdth]

How about this? https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
and this https://developer.mozilla.org/en-US/docs/Web/Events/readystatechange

[officert]

Yea those events work if you have access to the page inside the iframe, but you can't access those events from outside the iframe as far I know.

[officert]

https://stackoverflow.com/questions/13952942/iframe-readystate-does-not-work-in-chrome

[officert]

Found a way to inject a script into the inner document and listen for the readstatechange event : https://github.com/officert/vue-friendly-iframe/releases/tag/0.12.0

updated in V0.12.0

[sangdth]

love you! ;D

[officert]

Let me know if this is working properly for you. I'm still not sure it actually works, as I'm seeing the readstatechange event fire before the iframe load event fires.

[officert]

I think it's because I'm simply writing some HTML and JS into the document here
https://github.com/officert/vue-friendly-iframe/blob/master/src/components/FriendlyIframe/index.vue#L51
so we're seeing the onreadystatechange event fired when this document loads. But then the onload of the body fires and changes the URL. I don't think we're getting the onreadystatechange from the actually page being loaded into the iframe.

[sangdth]

I have done a quick test and it came like this:

document-load fired at 1549833977121
load fired at          1549833977122
iframe-load fired at   1549833977125

So I think as you said before, we do not have any message from inside the source to tell us about the event. Maybe in the future, we will have something, but I'm good to go with this version.

Thanks for your time and effort.