Skip to content

add support for onload function #42

Open
@iuri-gg

Description

@iuri-gg

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');
      });

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions