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.

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

Unable to scroll to requested position, window.parentIframe not found #868

Closed
rldorado opened this issue Sep 29, 2020 · 10 comments · Fixed by #1334
Closed

Unable to scroll to requested position, window.parentIframe not found #868

rldorado opened this issue Sep 29, 2020 · 10 comments · Fixed by #1334
Labels

Comments

@rldorado
Copy link

Hi @davidjbradshaw

I wonder if you could help me, I'm not sure if it's an issue or it's already that I'm doing something wrong with your plugin.

It gives me this error:

[Nested host page: eAppIframe] Unable to scroll to requested position, window.parentIFrame not found

I'm using your plugin inside my vue Application and this is the code where I think it fails:

App.vue

    mounted () {
        window.iFrameResizer = {
            onReady: () => {
                // Store iframe params from host page
                window.parentIFrame.getPageInfo(params => {
                    this.setIframeParams(params);
                });
            },
            onMessage: message => {
                if (message === 'RESIZE_EVENT_EXECUTED') {
                    iframeService.resetIframeIsResizing(); // reset the flag to allow triggering the scrolling event within iframe
                }
            },
        };
       ...
     }

My code on the html above this component is this:

<html>
    <head>
    </head>
    <body>
        <div id="eApp"></div>
        <script src="init.js"></script>
        <script>
        App.init({
            assetHost: '/onlinetool/',
            debug: true
        })
        </script>
    </body>
</html>

On init function I basically create global iFrameResize default values and a bit more, I'm going to omit with three points code that I think has nothing to do with it.

init.js

/* global iFrameResize */
(function(w, d) {
const defaults = {
   ...
   iframeid: "eAppIframe",
   targetElementId: "eApp"
}
w.App = {
   init: functon (options) {
        ....
      // Inject & init iFrameResizer
      let iframeResizerScript = d.createElement("script");
      iframeResizerScript.type = "text/javascript";
      iframeResizerScript.async = true;
      iframeResizerScript.onload = function() {
        iFrameResize({
            log: config.debug,
            checkOrigin: false,
            onScroll: function(pos) {
              w.scroll({ top: pos.y, left: pos.x, behavior: "smooth" }); // scroll via smoothscroll polyfilled window.scroll
              return false; // disable default scrolling
            },
            onResized: function(params) {
              params.iframe.iFrameResizer.sendMessage('RESIZE_EVENT_EXECUTED');
            },
            onMessage: function(params) {
              if (params.message.type === "locationReload") {
                w.location.reload();
              }
              if (params.message && params.message.type === "redirect") {
                w.location.assign(params.message.data.redirectUrl);
              }
            }
          }, "#" + config.iframeId);
   }
}
)

Do you understand or have a hint about what's going on?

I've the feeling this way to load iframeResizer is not giving enough time to the parentIframe to be loaded. App.vue loads iframeResizer later than init.js configures everything and that leads to spam out that issue...

Thank you very much for your attention!

@davidjbradshaw
Copy link
Owner

When your nesting iFrame, the one in the middle needs both JS files

@bertho-zero
Copy link

Hi @davidjbradshaw

I have this problem, I have this iframe in a sotrybook and iframe-resizer thinks my parent iframe is an intermediate iframe because storybook itself works with iframes.

I don't want to move the scroll to the topmost parent, just to my parent iframe.

@davidjbradshaw
Copy link
Owner

Not sure I fully follow the question. Do you want to scroll an intermediate iframe, but not top?

I think I need to see a working demo to fully understand the issue.

@davidjbradshaw davidjbradshaw reopened this Sep 6, 2024
@bertho-zero
Copy link

Yes that's it, I have something like this:

  Storybook
      v
Parent iframe
      v
    Child

I just need my child to tell its first parent to move the scroll, the top iframe is not controlled by me and does not have iframe-resizer. In this case it is a storybook but the problem will arise for any site that will integrate my parent page.

@davidjbradshaw
Copy link
Owner

Just out of interest does scrollBy() work?

@bertho-zero
Copy link

No, I have the same error

@davidjbradshaw
Copy link
Owner

Just published 5.3.1-beta.1 which should fix this. Can you please give it a try and let me know.

@bertho-zero
Copy link

Version 5.3.1-beta.1 fixes the issue, thanks

@davidjbradshaw
Copy link
Owner

Thanks for the feedback, I will get a final release out later this week.

@davidjbradshaw
Copy link
Owner

Released v5.3.1.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants