window.parentIFrame.scrollTo(0,0) has no effect

[Grant Spilsbury]

Hi,

Thank you for a great library. I am using the iframe-resizer-react package.

I want to scroll to the top of the iframe after a form is submitted.

I added this finally block to the form's submit function

.finally(() => {
 if ('parentIFrame' in window) {
  console.log('--------------------Scrolling---------------------')
  window.parentIFrame.scrollTo(0, 0)
 }
})

Expected behavior
After the form is submitted the iframe scrolls to the top.

Actual behavior
After the form is submitted the iframe does not scroll up (leaving the top of the iframe out of the visible display area).

Any idea what I'm doing wrong?

Here are the logs
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://localhost:3005') does not match the recipient window's origin ('http://localhost:3000').
... (removed log entries before submit is pressed)
SimpleForm.tsx?8dfb:182 --------------------Scrolling---------------------
iframe-resizer.js?f643:244 [iFrameSizer][iFrameResizer0] Sending message to host page (iFrameResizer0:0:0:scrollTo)
index.es.js:175 [iFrameSizer][Nested host page: iFrameResizer0] Received: [iFrameSizer]iFrameResizer0:1331:1631:mutationObserver
index.es.js:175 [iFrameSizer][Nested host page: iFrameResizer0] Checking connection is from: http://localhost:3005
index.es.js:175 [iFrameSizer][Nested host page: iFrameResizer0] Checking height is in range 0-Infinity
index.es.js:175 [iFrameSizer][Nested host page: iFrameResizer0] Checking width is in range 0-Infinity
index.es.js:175 [iFrameSizer][Nested host page: iFrameResizer0] Requesting animation frame
index.es.js:175 [iFrameSizer][Nested host page: iFrameResizer0] Received: [iFrameSizer]iFrameResizer0:0:0:scrollTo
index.es.js:175 [iFrameSizer][Nested host page: iFrameResizer0] Checking connection is from: http://localhost:3005
index.es.js:175 [iFrameSizer][Nested host page: iFrameResizer0] Reposition requested from iFrame (offset x:0 y:0)
suppressWarning.ts:9 [iFrameSizer][Nested host page: iFrameResizer0]
window.console.warn @ suppressWarning.ts:9
output @ index.es.js:175
warn @ index.es.js:169
scrollParent @ index.es.js:457
scrollRequestFromChild @ index.es.js:479
actionMsg @ index.es.js:581
iFrameListener @ index.es.js:670
postMessage (async)
Ne @ iframe-resizer.js?f643:698
scrollTo @ iframe-resizer.js?f643:353
eval @ SimpleForm.tsx?8dfb:183
Promise.finally (async)
onTokenChange @ SimpleForm.tsx?8dfb:166
handleChange @ recaptcha.js?024d:95
HR.H @ recaptcha__en.js:690
z.D @ recaptcha__en.js:74
(anonymous) @ recaptcha__en.js:74
(anonymous) @ recaptcha__en.js:100
X.next @ recaptcha__en.js:359
q @ recaptcha__en.js:127
Promise.then (async)
F @ recaptcha__en.js:127
(anonymous) @ recaptcha__en.js:127
(anonymous) @ recaptcha__en.js:127
(anonymous) @ recaptcha__en.js:222
(anonymous) @ recaptcha__en.js:73
(anonymous) @ recaptcha__en.js:33
E6 @ recaptcha__en.js:492
B @ recaptcha__en.js:270
index.es.js:175 [iFrameSizer][Nested host page: iFrameResizer0] IFrame (iFrameResizer0) height set to 1331px
iframe-resizer.js?f643:244 [iFrameSizer][iFrameResizer0] Trigger event lock off
iframe-resizer.js?f643:244 [iFrameSizer][iFrameResizer0] --
iframe-resizer.js?f643:244 [iFrameSizer][iFrameResizer0] Trigger event: mutationObserver: [object HTMLBodyElement] childList
iframe-resizer.js?f643:244 [iFrameSizer][iFrameResizer0] Parsed 27 HTML elements
iframe-resizer.js?f643:244 [iFrameSizer][iFrameResizer0] Element position calculated in 0ms
iframe-resizer.js?f643:244 [iFrameSizer][iFrameResizer0] No change in size detected
iframe-resizer.js?f643:244 [iFrameSizer][iFrameResizer0] Trigger event: mutationObserver: [object HTMLBodyElement] childList
iframe-resizer.js?f643:244 [iFrameSizer][iFrameResizer0] Parsed 19 HTML elements
iframe-resizer.js?f643:244 [iFrameSizer][iFrameResizer0] Element position calculated in 0ms
iframe-resizer.js?f643:244 [iFrameSizer][iFrameResizer0] No change in size detected

[David J. Bradshaw]

You need to scroll before submitting the form, as the page unloads once you submit the form