如何使用 iframe-resizer 更改 GAS iframe（在 WordPress 中）的高度

Question

我想将 Google 应用程序脚本 Web 的 iframe 添加到 WordPress 站点。我想摆脱滚动条。看图

不确定 iframe-resizer 是否因为此错误消息而无法正常工作

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').

来自 iframe-resizer troubleshooting 页面看起来这个错误不一定是问题

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.

不确定如何在 onLoad

之后加载 iframeResize()

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 只提供两个选项

default 不起作用并且
allowall 在 jsfiddle
上给我一个错误
加载时发现无效X-Frame-Optionsheader “http://fiddle.jshell.net/_display/?editor_console=true”：“ALLOWALL”不是有效指令。
SAMEORIGINGoogle不接受

我在某处读到错误 Failed to execute 'postMessage' on 'DOMWindow' 可能是因为我的 WordPress 在 http 上运行，但 Google 在 https 上运行。所以我试图在我的 https site 上设置它，但出现相同的错误

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').

它还会给出警告信息

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.

如何检查 iFrameResizer.contentWindow.js 是否已加载？

我在 body 标签中有这个 <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.contentWindow.min.js"></script>

当我直接转到 iframe url 时，我可以看到这个

所以我猜 contentWindow.js 已加载

谁能帮我调整一下高度？

UPDATE1 GAS 中的 setHeight() 没有帮助 return HtmlService.createTemplateFromFile('index').evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).setHeiht(500)

UPDATE2 最少的可重现示例

Google 个文件

.gs代码

这是整个 gs 服务器代码

function doGet() {
  Logger.log("let us start");

  return HtmlService.createTemplateFromFile('index').evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL) 
}

.html 代码

我没有包括整个文本，只需复制并粘贴您能找到的任何内容

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.contentWindow.min.js" integrity="sha512-FOf4suFgz7OrWmBiyyWW48u/+6GaaAFSDHagh2EBu/GH/1+OQSYc0NFGeGeZK0gZ3vuU1ovmzVzD6bxmT4vayg==" crossorigin="anonymous"></script>
    <h2>Povinnosti identifikované osoby</h2>
     <p>Identifikovaná osoba je povinna <strong>podat přihlášku k&nbsp;registraci do 15 dnů</strong> ode dne, kdy se stala identifikovanou osobou. Tuto přihlášku nemusí na rozdíl od plátců DPH podávat elektronicky. Další povinností identifikované osoby je <strong>vést v&nbsp;evidenci pro účely DPH veškeré údaje</strong>, které se vztahují k&nbsp;jejím daňovým povinnostem.</p>
  </body>
</html>

WordPress 文件 test WP page

我创建了一个页面并使用了 Custom HTML block。

里面是这段代码

<iframe id="test" style=" width: 1px;
    min-width: 100%;" src="https://script.google.com/macros/s/AKfycbyCkz_4-s7HTr4nYirkD_UESfObNLy3-DwE0EpWiemmEkSc1F_kev-UzA/exec"></iframe>
    
 
<script>
 iFrameResize({
                log                     : true,                  // Enable console logging
                enablePublicMethods     : true,                  // Enable methods within iframe hosted page
                resizedCallback         : function(messageData){ // Callback fn when resize is received
                    $('p#callback').html(
                        '<b>Frame ID:</b> '    + messageData.iframe.id +
                        ' <b>Height:</b> '     + messageData.height +
                        ' <b>Width:</b> '      + messageData.width + 
                        ' <b>Event type:</b> ' + messageData.type
                    );
                },
                messageCallback         : function(messageData){ // Callback fn when message is received
                    $('p#callback').html(
                        '<b>Frame ID:</b> '    + messageData.iframe.id +
                        ' <b>Message:</b> '    + messageData.message
                    );
                    alert(messageData.message);
                },
                closedCallback         : function(id){ // Callback fn when iFrame is closed
                    $('p#callback').html(
                        '<b>IFrame (</b>'    + id +
                        '<b>) removed from page.</b>'
                    );
                }
            });
</script>

functions.php inside Twenty Twenty-One: 主题功能

我添加了这段代码来包含插件

/* Custom script with no dependencies, enqueued in the header */
add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
function tutsplus_enqueue_custom_js() {
    wp_enqueue_script('custom', 'https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js');
}

Answer 1

我不是 wordpress 专业人士，所以我不确定您在哪里添加脚本，css 等等。但要让它发挥作用。

由于我没有您的代码，我将尝试从基础开始逐步进行修复。

确保您在 wordpress 站点上包含 iframeResizer.min.js 脚本。（只是了解基础知识）
在您写问题时，请确保 iframeResizer.contentWindow.min.js 在您的 google 申请网站上。（写的好看）
添加小脚本进行初始化，如：<script>iFrameResize({ log : true, enablePublicMethods: true});</script>（不需要日志，但会向控制台提供一些信息）

我认为您已经完成了这些基本步骤。这通常应该适用于基本情况，但我认为它不会。最可能的问题是如何为您的应用程序计算高度。所以接下来尝试更改 heightCalculationMethod 属性以尝试不同的调整大小方法。

例如，将您的初始化脚本更改为：

<script>iFrameResize({ 
    log : true, 
    enablePublicMethods: true, 
    heightCalculationMethod : 'lowestElement' // This property is added
});</script>

此属性有多个选项，因此请仔细检查所有选项并尝试其中是否有效。

'bodyOffset'
'bodyScroll'
'documentElementOffset'
'documentElementScroll'
'max'
'min'
'lowestElement'
'taggedElement'

其中之一应该正确更新大小。

如果这不起作用，您可以尝试像这个 Whosebug 问题一样手动调整大小：make iframe height dynamic based on content inside- JQUERY/Javascript 但这可能需要使用允许的来源等更新 header。

请告诉我这项工作是否有效，否则我会在更多帮助下尝试更新。

Answer 2

编辑： 在与@Radek 和@TheMaster 交谈后，问题似乎是我们需要重定向 postMessageAPI 将其消息发送到嵌套 iframe 的位置。内部 iframe 的高度都设置为 100%，因此一旦我们更改外部框架的高度，它们就会调整大小。

Iframe-resizer 从未针对此用例构建，但也许我们可以对其进行一些修改。您需要保持现在的通话状态，但如果我们更改行 850，我们可以重定向消息。继续下面的建议，我认为它需要从以下位置更改：

iframe.contentWindow.postMessage(msgId + msg, target)

类似于以下内容：

window.gasFrame.postMessage(msgId + msg, target)

现在我们必须获得 gasFrame 的值。将以下内容添加到您的 iframe 中。

top.postMessage('gasFrame', '*')

然后在主页上我们需要延迟启动 iframeResize() 直到我们收到该消息。

window.addEventListener("message", (event) => {
  if (event.data === 'gasFrame') {
    window.gasFrame = event.source
    iframeResize({ log: true, checkOrigin: false})
  }
}, false)

我们的下一个问题是浏览器往往会少报告 iframe 中内容的几个像素的高度。通常我们通过禁用 iframe 上的滚动条来克服这个问题。但是，由于我们有一个我们无法控制的嵌套 iframe，因此我们现在无法做到这一点。

唯一的解决办法是在报告的高度上增加一点，这样报告的值总是大于实际高度，我希望在大多数情况下 8px 左右应该没问题，但我有过去看得最多16px。

为此，我们可以在第 1059 行更改 contentWindow 脚本文件，您将看到以下内容。

undefined !== customHeight ? customHeight : getHeight[heightCalcMode]()

并将其更改为

undefined !== customHeight ? customHeight : Number(getHeight[heightCalcMode]()) + 8

正如我上面所说，您可能需要将 8 更改为最适合您网站的值。

如何使用 iframe-resizer 更改 GAS iframe（在 WordPress 中）的高度

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

javascript

html

google-apps-script

iframe

iframe-resizer