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 与运行代码的窗口/框架位于同一域中，则只能修改或读取 iframe 的 DOM 内容（在您的示例中是可以的）。

于 2013-03-10T05:53:16.447 回答