1

iFrame 内のコンテンツを中央に配置する方法を知っている人はいますか? Javascript と innerHTML で何かをしようと考えていましたが、わかりません。どんな助けでも大歓迎です:) iFrameの幅をコンテンツの幅に一致するように設定しても（おそらくjpg URLなど）、ページの適切な幅のときにiFrameをページの中央に配置できるため、素晴らしいでしょう。表示しているページ。

編集：その部分を機能させる方法を（Googleで見つけたコードを使用して）見つけましたが、問題はPHPで（_getを使用して）それを実行しようとすると機能しなくなることです...たとえば、testというphpファイルを作成します.php

php ドキュメントのコードは次のとおりです。

<?php
print '<title>blah blah blah</title><body bgcolor="#505050"><br />
<script type="text/javascript">document.domain="' . htmlspecialchars($_GET["image"]) .  '";</script> <SCRIPT LANGUAGE=\'javascript\'> 
function resize_iframe(){ 
document.getElementById(\'textoforo\').height=100; 
document.getElementById(\'textoforo\').height=window.frames["textoforo"].document.body.scrollHeight; 
document.getElementById(\'textoforo\').width=100; 
document.getElementById(\'textoforo\').width=window.frames["textoforo"].document.body.scrollWidth; 
}
</SCRIPT><div style="z-index:99; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#505050;"><table style="vertical-align:middle; text-align:center; height:90%; width:100%; background-color:#FFF"><center><td style="vertical-align:middle; height:100%;"><center><iframe id=\'textoforo\' 
name=\'textoforo\' 
border=1 
src=\'' . htmlspecialchars($_GET["image"]) . '\' 
width=768 
height=800 
MARGINWIDTH=0 
MARGINHEIGHT=0 
onload=\'resize_iframe();\' 
> 
</iframe></center></td></center></table></center></div></body>';
?>

次の URL に移動します。

"//test.php?image=http://www.all2need.com/wp-content/uploads/2012/04/African-Daisy-Flower.jpg"

ページをロードしても機能しませんが、ソース コードをコピーして html ドキュメントに貼り付けると機能します!!!!! ???? だから、PHPが（_Getを使用して）画像URLを入力する前に、javascriptが高さと幅の変数を取得しようとしていると思うので、nil値を返しますか？わかりません... 何か考えはありますか？

4

4 に答える 4

2

あなたは方法を探していDOM-Readyます。自分で作成することもできますが、JavaScriptの経験があまりない場合は、それを処理するJavascriptフレームワークの使用を検討することをお勧めします。

これらは、スクリプトのサイズ変更/再配置をいつ開始するかを決定するのに役立ちます。

個人的なメモ：jQuery社会は少し大きく、より適切にサポートされているため、より一般的に使用されているものを使用することをお勧めします。

于 2012-11-03T08:17:41.310 に答える
1

iframe のコンテンツは、個別の html ドキュメントです。php ファイルを使用することもできますが、php タグの間にすべてを配置して、すべての html コードを出力 (「エコー」を使用) する必要はありません。<head>, <html> and <body>タグを付けて適切なページにします。iframe のコンテンツのスタイルを設定する場合は、外部の css ファイルを読み込むことができます。

iframe 自体は、それが配置されているメインの html ページの一部です。iframe で実行する Javascript は、その iframe 内の要素にのみ影響します。これを回避するには、javascript をメイン ページに配置し、iframe 内から次のように指定します。

parent.yourfunction();

また、ページに画像を配置するだけなら、なぜ iframe を使用するのでしょうか? <div>内部に画像を含む a を使用して、スタイルを設定します。

于 2012-11-02T15:04:29.107 に答える
1

画像を に直接ロードする際の問題は、操作できるiframeHTML 内のスタイルや適切な位置がないことです。DOM画像をそのまま表示するだけです。したがって、解決策は、iframe のサイズをコンテンツのサイズ (ブラウザーごとに異なる) に変更してから、iframe を中央に配置することです。

PHP がこのすべてのどこに当てはまるのか、私にはわかりません。

おそらく、これは良い代替手段です: http://fancybox.net/ (下部にある例を確認してください)

于 2012-11-02T22:28:54.773 に答える
1

ターゲット URL が画像かどうかを確認する必要があります。画像の場合は、次の方法を使用して Iframe のサイズを設定します。

list ($width, $height) = getimagesize(htmlspecialchars($_GET["image"]));

次に、幅と高さを Iframe に直接設定できます。

画像でない場合は、次のように使用します。

    <?php
print '<title>blah blah blah</title><body bgcolor="#505050">
<script type="text/javascript">
function getDocHeight() {
    var D = document.getElementById("textoforo").document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}
function getDocWidth() {
    var D = document.getElementById("textoforo").document;
    return Math.max(
        Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
        Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
        Math.max(D.body.clientWidth, D.documentElement.clientWidth)
    );
}
function resize_iframe()
{ 
    /*
    Use getDocHeight and getDocWidth to set the dimensions
    */
}
</SCRIPT>
<style type="text/css">
html,body
{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
}
</style>
<div style="z-index:99; position:absolute; top:0; left:0; width:100%; height:100%; background-color:#FF00FF;">
<iframe id="textoforo" 
name="textoforo" 
border="1" 
src="' . htmlspecialchars($_GET["image"]) . '"
MARGINWIDTH="0" 
MARGINHEIGHT="0" 
onload="resize_iframe();"> 
</iframe>
</div>
</body>';
?>

それにもかかわらず、私はあなたの質問とその使い方を理解するのにまだ問題があります.

編集：オンロードイベントは私にとって正しく機能しています（FF、IE）。どのブラウザを使用していますか?

于 2012-11-08T11:37:46.880 に答える