vue-friendly-iframe
vue-friendly-iframe copied to clipboard
officert
add support for `onload` function
Right now vue-friendly-iframe exposes load and iframe-load events. however both of those event are triggered before the document from src url is loaded. I was testing both in chrome and firefox with vue-friendly-iframe, I had my server take 3 seconds before returning html but vue-friendly-iframe was triggering both of those events right away.
In the end I ended up having an onload listener set on iframe and that worked well. I suggest refactoring load event to be triggered after src loads. Looking at the code it seems that if we add event listener for load after iframeDoc.close(); //iframe onload event happens line, then it should work correctly.
I can try to submit a PR if you agree with this approach.
Basically this would be the new setIframeUrl() method:
setIframeUrl() {
if (this.iframeEl.contentWindow === null) {
setTimeout(this.setIframeUrl)
return;
}
const iframeDoc = this.iframeEl.contentWindow.document;
iframeDoc.open()
.write(
`
<body onload="window.location.replace('${this.src}'); parent.postMessage('${this.iframeLoadedMessage}', '*')"></body>
`
);
iframeDoc.close(); //iframe iframe-load event happens
const vm = this;
this.iframeEl.addEventListener("load", (e) => {
vm.$emit('load');
});
@ocha I'm having same problem. Do you implement own solution or still using this package with modification?
Can't speak for @ocha but based on his remarks I'm using a workaround like this:
<VueFriendlyIframe
id="my_iframe_id"
:class="classes"
:src="srcInternal"
class-name="full-view-iframe"
@iframe-load="iframeLoad"
@load="onLoad"
/>
// in methods: onLoad
const iframe = document
.getElementById("my_iframe_id")
.children.item(0)
// This is a workaround for the issue below, in which the VueFriendlyIFrame load and
// iframe-load events seem to fire well before the inner document actually loaded.
// So, we attach our own event listener so we can know when it's really loaded.
// https://github.com/officert/vue-friendly-iframe/issues/42
iframe.addEventListener("load", (elem) => {
this.$emit("load", event)
console.log("iframe document loaded", elem)
if (elem && iframe) {
// Apply the inner content's natural height to the iframe, which will then
// be constrained by the max-height media query stuff below.
const scrollHeight = iframe.contentWindow.document.body.scrollHeight
iframe.style.height = scrollHeight + "px"
}
})
