Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add support for onload function #42

Open
iuri-gg opened this issue Jul 29, 2021 · 3 comments
Open

add support for onload function #42

iuri-gg opened this issue Jul 29, 2021 · 3 comments

Comments

@iuri-gg
Copy link

iuri-gg commented Jul 29, 2021

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');
      });
@hakanersu
Copy link

@ocha I'm having same problem. Do you implement own solution or still using this package with modification?

@Preston-Landers
Copy link

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"
  }
})

@hakanersu
Copy link

Thank you @Preston-Landers , I understood solution more clearly

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@iuri-gg @hakanersu @Preston-Landers