Friday, 15 January 2021

How to change height of GAS iframe (in WordPress) using iframe-resizer

I want to add iframe of my Google Application Script Web to WordPress site. I want to get rid of the scroll bar. See the pic.

enter image description here

Not sure if the iframe-resizer does not work because of this error message

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided
('https://script.google.com') does not match the recipient window's origin ('http://rsness.8u.cz').

From iframe-resizer troubleshooting page looks like this error does not have to be an issue that

This error occurs when the parent window tries to send a message to the iframe before it has loaded. IFrameResize makes multiple attempts to talk to the iFrame, so if everything is working then you can safely ignore this error message.

If youre still having problems, or you really want to not ignore the error, then you can try delaying the call to iframeResize() until after the onLoad event of the iframe has fired.

not sure how I can load iframeResize() after the onLoad

If this does not fix the problem then check x-Frame-Options http header on the server that is sending the iframe content, as this can also block calls to postMessage if set incorrectly.

Google offers only two options enter image description here

  • default does not work and

  • allowall gives me an error on jsfiddle

    Invalid X-Frame-Options header was found when loading “http://fiddle.jshell.net/_display/?editor_console=true”: “ALLOWALL” is not a valid directive.

  • SAMEORIGIN Google does not accept

I read somewhere that the error Failed to execute 'postMessage' on 'DOMWindow' could be because my WordPress runs on http but Google on https. So I tried to se it up on my https site but with the same error

iframeResizer.js:800 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided
('https://script.google.com') does not match the recipient window's origin ('https://zz.zustatzdravy.cz').

it also gives a warning message

iframeResizer.js:142 [iFrameSizer][Host page: iFrameResizer0] IFrame has not responded within
5 seconds. Check iFrameResizer.contentWindow.js has been loaded in iFrame. This message can be
ignored if everything is working, or you can set the warningTimeout option to a higher value
or zero to suppress this warning.

How can I check that iFrameResizer.contentWindow.js was loaded?

I have this in body tag <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.contentWindow.min.js"></script>

and when I go directly to the iframe url then I can see this enter image description here

So I guess the contentWindow.js was loaded

Anyone could help me to make the hight resize?

UPDATE1 setHeight() in GAS did not help return HtmlService.createTemplateFromFile('index').evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).setHeiht(500)



from How to change height of GAS iframe (in WordPress) using iframe-resizer

No comments:

Post a Comment