0

私はここで夢中になります。ここで、クロムでも動作すると思われるスクリプトを見つけましたが、動作させることができません

ここに私のヘッダーのスクリプトがあります

<script type="text/javascript">
function resizeFrame() {
     var t=document.getElementById("Footer");
     var f = document.getElementById("mainContent");
     var y = f.contentWindow;
     t.innerHTML = y.document.body.offsetHeight;
     f.height = y.document.body.offsetHeight;
    }
</script>

そしてiframe

 <iframe onload="resizeFrame()" id="mainContent" src="swwbookpg1.php" scrolling=auto frameborder=0 
height="100%" width="100%">Working!</iframe>
<p id="Footer"> Footer</p>

firefox と IE では動作しますが、chrome では動作しません。

誰かがそれを助けることができれば、それは素晴らしいことです!

ここで使用されています：https ://www.whalewatchingsydney.com.au/payment_sww/

ありがとう =)

4

2 に答える 2

1

Google は、「悪を行わない」というスローガンを守っているようです。Chrome は iframe の高さを動的に調整できますが、Google はそれを簡単にはできません。2日間問題に取り組み、他のすべてのブラウザで完全に機能する大量のjavascriptスニペットを試した後、Chromeは最終的に機能するものを手に入れることができました. これを共有して、他のウェブサイト開発者が私が経験しなければならなかった 48 時間の苦痛から解放されることを願っています.

外部の SetiFrameHeight.js ファイル内で、html を使用して任意の iframe 子ドキュメントに追加できます。

<script type="text/javascript" src="SetiFrameHeigh.js"></script>

setIframeHeight.js

window.onload=setIframeHeight(window.top.document.getElementById('iFrame_ID'));
//note this code only runs serverside when using Google Chrome, very helpful


function setIframeHeight(ifrm){
    var doc = ifrm.contentDocument? ifrm.contentDocument:
    ifrm.contentWindow.document;
    var RestHeight=ifrm.style.height; //Capture original height see why below.
    ifrm.style.visibility = "hidden";
    ifrm.style.height = "10px"; //Necessary to work properly in some browser eg IE
    var NewHeight = getDocHeight( doc ) + 10;
    if (NewHeight>20){
        ifrm.style.height=NewHeight + "px";
    } else { //if dom returns silly height value put back old height see above.
        ifrm.style.height=RestHeight + "px";
    }
    ifrm.style.visibility = "visible";
}

function getDocHeight(doc) {
    doc = doc || document;
    var body = doc.body, html = doc.documentElement;
    var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight,
    html.scrollHeight, html.offsetHeight );
    return height;
}

このコード スニペットの本当の魔法は、基本的に考えられるすべての dom の組み合わせを試して、最大の高さを与えるものを選択する関数 getDocHeight です。これはhttp://www.christersvensson.com/html-tool/iframe.htmから入手したため、信用できません。

于 2014-01-07T21:17:47.863 に答える
0

クロム:

  1. document.createElement を使用して iFrame を作成し、それに名前 (「myIframe」) を割り当てると、場所を設定したときに新しい iFrame がコンテンツをロードしないことがわかりました。しかし、要素の src に URL を割り当てると、うまくいきました。さて、代わりに html テキストに iframe タグを手動で挿入すると (document.createElement を使用するのではなく静的に)、ドキュメントの場所 (およびタグの src) を設定するときにドキュメントが読み込まれます。変。

  2. iframe のコンテンツを直接表示するつもりだとしたら、なぜだろうか? 私は iframe を使用するのが好きですが、実際にはトップ ウィンドウのコンテナーにコンテンツを動的にロードするだけです。iframe にロードされた html の最後の部分には、出力をトップ フレームの目的の場所に移動するスクリプトが含まれています。

iFrame 経由で新しいコンテンツをロードする PHP スクリプトの例。

// top Frame calls the php script like this:

 <div id="myContainerDiv">
    <p>old content - please replace me with fresh content</p>
</div>


<iframe name="hiddenFrame" style="display:none;"></iframe>

<script>

    hiddenFrame.location = 'index.php?getNewContent=125';

</script>


// the following script would be at the top of index.php

<?php //

if( isset($_GET['getNewContent']) ):


echo '<div id="myIframeHtml">';

    // the html that I want to load to the top frame..


echo '</div>';

?>
<script>

    newContent = document.getElementById('myIframeHtml').innerHTML; // from this iFrame

    topContainer = top.document.getElementById('myContainerDiv'); // in top frame

    topContainer.innerHTML = newContent; // no fuss-no muss --> no encoding or parsing

</script>

<?php

exit;

endif;
于 2014-03-12T16:42:17.383 に答える