ifrmae直接打开图片，控制图片大小问题

1、问题
   目前iframe 直接打开一个图片点击按钮的时候插入一个图片。这个时候图片很大，已经超过iframe显示大小，出现了滚动条。
2、实现方式
   当插入图片的时候等比例缩小图片，但是不改变iframe，同时不能把图片放到另一个html页中。
   还是通过src="D:\\402880c72b2354bc012b238d7ffe0010.bmp" 打开。
   希望大家理解。代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script>
   function insertImage(){
     document.getElementById('ifrm').src="D:\\402880c72b2354bc012b238d7ffe0010.bmp";
   }
  </script>
</HEAD> <BODY>
<input type="button" name="button" value="测试" onclick="insertImage()"/>
  <iframe id="ifrm" name="ifrm" scrolling="auto" width="100%" height="755" scrolling="auto" frameborder="0" border="0" marginwidth="0" marginheight="0" >
</BODY>
</HTML>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

其实就是为了不让iframe出现滚动条，这样用户看起来很直观。
然后图片还能等比例缩小。用css或者js控制都可以。
只要能达到预期的效果
只是为了显示图片的话,为什么用iframe来故意制造麻烦呢,为什么不直接用<img>?
因为这个iframe不仅仅要显示图片还有txt，doc，excel。目前只有图片的时候难控制。
我碰到过。给你思路。
在加载图片的时候判断图片的大小。超过iframe大小了，用js设定其大小。
---------------------------------------------------------
但问题是图片加载时在网页中无法用js获取其尺寸，但有一个变相的办法获得。
加载时你把图片隐藏，onload之后用js读取其大小，处理完毕后再显示出来就OK啦...
可以而给你们些思路
<SCRIPT language="javascript" type="text/javascript">
function fnApply(){

    var oFrameBody = document.getElementById('frmMain');
var oContext = oFrameBody.contentWindow.document.body;
oContext.innerHTML = '';
//做一个div的框目的是控制img对象
var oDiv = document.createElement("div");
oDiv.setAttribute("scrolling","true");
oDiv.setAttribute("width",500);
oDiv.setAttribute("heigth",600);
oDiv.setAttribute("style","color:red;border:2;overflow-y:scroll"); var oNewNode = document.createElement("img");
oNewNode.src = "D:\\402880c72b2448eb012b245ca191000c.jpg";
    oNewNode.setAttribute("width","500");
    oNewNode.setAttribute("height","700");
oDiv.appendChild(oNewNode);
oContext.appendChild(oDiv);
}
</SCRIPT>
<body>
<table width="100%" cellSpacing="0" cellPadding="0"  border="0" id="tab">
<tr>
<td>
   <iframe id="frmMain" name="frmMain" src="d:\\11.txt" width="500" height="600"  id="ifrid" scrolling="auto"  style= "border:1 solid #black"  frameborder="0" >  </iframe> </td>
</tr>
</table>
<INPUT TYPE="button" VALUE="Apply Element" onclick="fnApply()">
</body>
function ReImgSize(obj){
var imgArr=document.getElementById(obj).getElementsByTagName("IMG");
for (i=0;i<imgArr.length;i++)
{
if (document.all)
{
if (imgArr[i].width>600)
{
imgArr[i].width="600"
imgArr[i].outerHTML='<a href="'+imgArr[i].src+'" target="_blank" title="在新窗口打开图片">'+imgArr[i].outerHTML+'</a>'
}
}
else
{
if (imgArr[i].width>600)
{
imgArr[i].title="在新窗口打开图片"
imgArr[i].style.cursor="pointer"
imgArr[i].onclick=function(e){window.open(this.src)}
}
}
}
}
ReImgSize("content");
//-->
</script> 这样控制一下
不知道用jquery的load函数，表示某个对象是否完成加载！能否处理？
$("#ifrm").load(function(){//判断ifrm对象是否加载完毕，同理这个对象也可以是document或window
var img=$("#ifrm").attr("src");
$w=$("#ifrm").width();
$h=$("#ifrm").height();
if((img.width()>$w)&&((img.height()>$h)
   img.width($w-5);img.height($h-5);//当图象体积大于IFRM时，让图象大小比IFRAME缩小5
});
不知道这个思路可否！没有测试过，随便写写，如有错误，还望多多包含！
<SCRIPT language="javascript" type="text/javascript">
function fnApply(){

    var oFrameBody = document.getElementById('frmMain');
var oContext = oFrameBody.contentWindow.document.body;
oContext.innerHTML = '';
//做一个div的框目的是控制img对象
var oDiv = document.createElement("div");
oDiv.setAttribute("scrolling","true");
oDiv.setAttribute("width",500);
oDiv.setAttribute("heigth",600);
oDiv.setAttribute("style","color:red;border:2;overflow-y:scroll"); var oNewNode = document.createElement("img");
oNewNode.src = "D:\\Test\\05-src\\WebRoot\\scan\\upload\\402880c72b2448eb012b245ca191000c.jpg";
    oNewNode.setAttribute("width","500");
    oNewNode.setAttribute("height","700");
oDiv.appendChild(oNewNode);
oContext.appendChild(oDiv);
}
</SCRIPT>
<body>
<table width="100%" cellSpacing="0" cellPadding="0"  border="0" id="tab">
<tr>
<td>
   <iframe id="frmMain" name="frmMain" src="d:\\11.txt" width="500" height="600"  id="ifrid" scrolling="auto"  style= "border:1 solid #black"  frameborder="0" >  </iframe> </td>
</tr>
</table>
<INPUT TYPE="button" VALUE="Apply Element" onclick="fnApply()">
</body>
我写的，但是每次用iframe看图片总是随机性失效。
因为红色的标志。
function showFile(FileID){
tmpLoad = false;
var fileFlag = FileID.IsPicture();
var oFrame = document.frames("frmMain").document.frames("middleMain").document.getElementById('threeMain');
//alert(oFrameBody.innerText);
if(fileFlag){
    var oFrameBody = oFrame.contentWindow.document.body;
    oFrameBody.innerHTML='';
    //oFrameBody.innerText='';
   //var document.frames("frmMain").document.frames("middleMain").document.getElementById('myImg').src="<%=basePath%>//scan//upload//"+FileID;
       // var oFrame = document.frames("frmMain").document.frames("middleMain").document.getElementById('threeMain');
        var oDiv = document.createElement("div");
oDiv.setAttribute("scrolling","true");
oDiv.setAttribute("width",oFrame.offsetWidth);
oDiv.setAttribute("heigth",755);
oDiv.setAttribute("style","color:red;border:2;overflow-y:scroll");
//oDiv.style.cssText="color:red;border:2;overflow-y:scroll;";
        //var oDivd = document..createElement("div")
        var oImg =document.createElement("img");
        oImg.setAttribute("id","myimg");
oImg.src="<%=basePath%>//scan//upload//"+FileID;
oImg.onreadystatechange=function(){
  if(oImg.readyState=="complete") {
    if(oImg.width > oFrame.offsetWidth){
    oImg.width = oFrame.offsetWidth-20;
  }else{
    oImg.width = oImg.width;
  }
  oImg.height = oImg.height;
  //alert("oImg.width="+oImg.width+",oImg.length="+oImg.height);
  oDiv.appendChild(oImg);
  oFrameBody.appendChild(oDiv);
  document.getElementById('btnRotation').disabled=false;
    }
//alert("Frane高度--"+oFrame.offsetHeight+",Frane宽度--"+oFrame.offsetWidth+",oImg的宽度--"+oImg.height+",oImg的高度---"+oImg.width);
//oImg.height =  oImg.height;
  }
}else{
   oFrame.location = "<%=basePath%>//scan//upload//"+FileID;
   document.getElementById('btnRotation').disabled=true;
}
}
因为我的页面有一个上一张图片和下一张图片还有txt文本页一起开。所以导致出现问题。上一页或者下一页就不显示了
但是文件链接存在。只要回答就有分。本来想结贴但是看没有有效的答案。在等等。