使用javascript在iframe上设置图像对象

当我在该表中单击图像时，我希望在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>

您的浏览器不支持iFrame

我建议只设置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;
}

您之前尝试的内容存在几个问题：

您正在将

iframe.src

设置为图像URL。执行此操作时，您无法控制

iframe

创建的

img

对象的

高度和
宽度，它与您创建的另一个
img
对象无关

不能在一个文档中创建

img

对象，然后在另一个文档中使用它

将一些HTML放入另一个文档中最简单的方法就是在其上设置HTML，并让浏览器在正确的文档中创建对象

---

另外，请记住，如果iframe与您的代码运行的窗口/框架位于同一个域中（在您的示例中这是可以的），则只能修改或读取iframe的DOM内容。

我强烈建议您在JSFiddle.net上创建一个示例，这样人们可以更轻松地为您调试它，您可以更快地获得更多答案。

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);
}