2

ここここの指示に従いましたが、iframe の高さを自動調整するために easyXDM を正しく実装できません。

iframe (host.html) のあるページで、インポートしているコンテンツ (otherdomain.html) が表示されますが、iframe の高さがコンテンツよりもはるかに短く、高さが変化しません。残念ながら、これは私がここにリンクできない開発サイトにあります。

otherdomain.html にはクリックすると展開する要素があるため、ページのコンテンツに合わせて iframe を展開および縮小する必要があります。

誰が私が間違っているのか教えてもらえますか? これらは、私が使用している 2 つの異なるドメイン/サーバーです。ソケットをセットアップしたり、このようなことをしたのはこれが初めてです。コンソールにエラーは表示されませんが、それが私に言っていることからあまり意味がありません。

同様の質問がありますが、回答がありませんでした: easyXDM を使用した IFrame のサイズ変更

iFrame があるページにあるものは次のとおりです。

        <style type="text/css">
            div#embedded iframe {
                width: 725px;
            }
        </style>  
        <script src="../js/easyXDM.debug.js" type="text/javascript"></script> 
        <script type="text/javascript" language="javascript">
        new easyXDM.Socket({
            remote: "http://lcoawebservices.com/careers/resize_intermediate.html?url=job-postings.php",
            container: "embedded",
            onMessage: function (message, origin) {
                var settings = message.split(",");
                this.container.getElementsByTagName("iframe")[0].style.height = settings[0];
                this.container.getElementsByTagName("iframe")[0].style.width = settings[1];
            }
        });

        </script>
        <div id="embedded"></div>

resize_intermediate.html にあるものは次のとおりです。

                    <script type="text/javascript" src="../scripts/easyXDM.debug.js">
                </script>
                <script type="text/javascript">
                    var iframe;
                    var socket = new easyXDM.Socket({
                        swf: "../scripts/easyxdm.swf",
                        onReady: function(){
                            iframe = document.createElement("iframe");
                            iframe.frameBorder = 0;
                            document.body.appendChild(iframe);
                            iframe.src = easyXDM.query.url;
                        },
                        onMessage: function(url, origin){
                            iframe.src = url;
                        }
                    });
                    //Probe child.frame for dimensions.
                    function messageBack(){
                        socket.postMessage ( iframe.contentDocument.body.clientHeight + "," + iframe.contentDocument.body.clientWidth); 
                    };

                    //Poll for changes on children every 500ms.
                    setInterval("messageBack()",500);
                </script>
                <style type="text/css">
                    html, body {
                        overflow: hidden;
                        margin: 0px;
                        padding: 0px;
                        width: 100%;
                        height: 100%;
                    }

                    iframe {
                        width: 100%;
                        height: 100%;
                        border: 0px;
                    }
                </style>

インポートしているページの下部に、これを配置しました。

        <script type="text/javascript">
            window.onload = function(){
                parent.socket.postMessage(document.body.clientHeight || document.body.offsetHeight || document.body.scrollHeight);
            };
        </script>
4

0 に答える 0