次の lib http://davidjbradshaw.github.io/iframe-resizer/を使用しています。これにより、ソース ページの後にクロス サイト 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();
?>