iframe 高さ自動調整-优快云博客

本文链接：https://blog.youkuaiyun.com/neusoft06/article/details/145715157

iframeに異なるドメイン（クロスドメイン）のコンテンツを読み込んで高さを自動調節する方法 - みのるの備忘録

wordpress (親) 側の設定

<apex:iframe id="iframe" src="{!IF(isURL,Url, URLFOR($Resource.test))}" scrolling="no" width="100%"/>

<html>
<head>
    <title>親</title>
    <script src="js/jquery.js"></script>
    <script>
        window.addEventListener('message', function(e) {
        var iframe = $("#fugapage");
        var eventName = e.data[0];
        var data = e.data[1];
        switch(eventName) {
            case 'setHeight':
                iframe.height(data);
                break;
            }
        }, false);
    </script>
</head>
<body>
    <iframe id="fugapage" src="http://fuga.com/" width="100%" height="auto" " frameborder="0" scrolling="no"></frame>
</body>
</html>

埋め込みたい別ドメインのページ（子）

fuga.com

<html>
    <head>
        <title>子</title>
        <script type="text/javascript">
        window.onload = function() {
            var height = document.getElementsByTagName("html")[0].scrollHeight;
            window.parent.postMessage(["setHeight", height], "*");
        }
        </script>
    </head>
    <body>
    ・・・
    </body>
</html>