0

そのテーブル内の画像をクリックすると、iframeに画像を表示したい。問題は、iframe 内に表示される画像が小さすぎることです (大きすぎる画像は今のところ問題ありません)。そのため、クリックされたときにJavaScript関数で画像を渡して必要なサイズ変更を実行しようとしましたが、ここで画像オブジェクトをiFrameのsrcとして設定する際に別の問題が発生します。助言がありますか？教えてください。助けていただければ、時間を大幅に節約できます。

ここに私が問題を抱えているJavaScriptコードがあります。

function resize(e){
    var newImg = document.createElement('img');
    newImg.src = document.getElementById(e).src; 
    newImg.width = '448'; 
    newImg.height = '336';
    document.getElementById('passTo').src = newImg.src; /*newImg doesn't work aswell*/
}

これが私のHTMLコードです...

<tr>
  <td colspan="2" height="336">
    <iframe id = "passTo" name="A" src="Activity 6.html"  style="width:100%; height:100%;" scrolling="no" marginheight="0" marginwidth="0">
      <p>iframes are not supported by your browser.</p>
    </iframe>
  </td>
</tr>
<tr>
  <td><img src = "index.jpg" id = "myimg" border="3" height="48" width="64" onclick="resize(myimg)"></img></td>
  <td><img src = "index.jpg" id = "myimg2" border="3" height="48" width="64" onclick="resize(myimg2)"></img></td>
</tr>
4

1 に答える 1

0

iframe 本体の innerHTML を設定することをお勧めします。

function resize(e){
    var imgURL = document.getElementById(e).src;
    var iframe = document.getElementById('passTo');
    var html = "<img width='448' height='336' src=" + imgURL + ">";
    var doc = iframe.contentDocument || iframe.contentWindow.document;
    doc.body.innerHTML = html;
}

または、自分で img オブジェクトを作成して挿入したい場合は、次のようにすることができます。

function resize(e){
    var imgURL = document.getElementById(e).src;
    var iframe = document.getElementById('passTo');
    // get iframe document in cross browser way
    var doc = iframe.contentDocument || iframe.contentWindow.document;
    // create img object in the iframe's document.
    var img = doc.createElement("img");
    img.height = 336;
    img.width = 448;
    img.src = imgURL;
    doc.body.appendChild(img);
}

以前に試したことにはいくつかの問題がありました。

  1. iframe.srcを画像 URLに設定していました。これを行うと、 が作成するオブジェクトを制御できず、作成した他のオブジェクトheightとは何の関係もありません。widthimgiframeimg
  2. imgあるドキュメントで作成したオブジェクトを別のドキュメントで使用することはできません。

HTML を別のドキュメントに配置する最も簡単な方法は、その上に HTML を設定し、ブラウザーに適切なドキュメント内のオブジェクトを作成させることです。

また、コードが実行されているウィンドウ/フレームと同じドメインにある場合にのみ、iframe の DOM コンテンツを変更または読み取ることができることに注意してください (例では問題ありません)。

于 2013-03-10T05:53:16.447 に答える