我使用以下库https://iframe-resizer.com/,它可以在源页面之后调整跨站点 iFrame 的大小。
虽然我遇到了以下问题但我无法解决:
首次加载页面时,iFrame 的高度是正确的(整个加载的页面都可以在 iframe 中看到)。但是,当按下链接并转到另一个高度比第一个(iFrame 中)更高的网站时,iFrame 不会更改,并且不会显示 iFrame 页面的底部。怎么会出现这种情况,该如何解决?
与上面的问题非常相似。我已经通过“bodyMargin”命令设置了边距。当第一个页面加载完成时,它工作正常,但是当单击 iFrame 中的网站上的链接时,“bodyMargin”中设置的边距将被清除,并且网站将恢复到其原始状态。我该如何解决这个问题?
代码:
<? php
/*
Template Name: iFrame
*/
get_header(); ?> <script type ="text/javascript"
src="<?php echo get_template_directory_uri(); ?>/js/iframeResizer.min.js"></script>
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="http: //xxxxxxxxx.com/" id="iframe" width="100%" scrolling="no"></iframe>
<script type ="text/javascript">
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>');
},
bodyMargin: '-200px 0 0 -25px',
});
</script>
<?php
get_footer();
?>
如果您的 iFrame 移动域,您需要将 checkOrigin 选项设置为 false。