【发布时间】：2021-04-15 23:03:01
【问题描述】：
我想将我的 Google Application Script 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.
-
default不起作用并且 -
allowall在jsfiddle 上给我一个错误加载时发现无效的 X-Frame-Options 标头 “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 是否已加载？
我在正文标签中有这个<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.contentWindow.min.js"></script>
所以我猜 contentWindow.js 已加载
谁能帮我调整高度？
UPDATE1 GAS 中的 setHeight() 没有帮助 return HtmlService.createTemplateFromFile('index').evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).setHeiht(500)
UPDATE2 最小可重现示例
谷歌文件
- .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 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 evidenci pro účely DPH veškeré údaje</strong>, které se vztahují k 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：主题函数
我添加了这段代码来包含插件
/* 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');
}
【问题讨论】：
-
this 有帮助吗？
-
或者this?
-
第一个 (setHeight()) 没有帮助，但第二个看起来很有希望。我必须进行更多调查。谢谢
-
@TheMaster 我添加了 Update2。这就是重现问题所需的一切吗？
-
由于nesting of frames，我相信 contentWindow.js 和主 iframeresizer.js 中的几行需要重写才能找到对方。家长应将消息发送至
window.frames[0].frames[0].frames[0]，孩子应发送至window.top
标签： javascript html google-apps-script iframe iframe-resizer