87,907
社区成员
发帖
与我相关
我的任务
分享ifrmae直接打开图片，控制图片大小问题
1、问题
目前iframe 直接打开一个图片 点击按钮的时候插入一个图片。这个时候图片很大，已经超过iframe显示大小，出现了滚动条。
2、实现方式
当插入图片的时候等比例缩小图片，但是不改变iframe，同时不能把图片放到另一个html页中。
还是通过src="D:\\402880c72b2354bc012b238d7ffe0010.bmp" 打开。
希望大家理解。
代码：
目前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>
...全文
请发表友善的回复…
发表回复
llddy 2010-09-26
- 打赏
- 举报
因为我的页面有一个上一张图片和下一张图片
还有txt文本页一起开。所以导致出现问题。上一页 或者下一页 就不显示了
但是 文件链接存在。
只要回答就有分。本来想结贴 但是看 没有有效的答案。
在等等。
还有txt文本页一起开。所以导致出现问题。上一页 或者下一页 就不显示了
但是 文件链接存在。
只要回答就有分。本来想结贴 但是看 没有有效的答案。
在等等。
llddy 2010-09-26
- 打赏
- 举报
我写的，但是 每次用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;
}
}
llddy 2010-09-26
- 打赏
- 举报
<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>
passself 2010-09-21
- 打赏
- 举报
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>
这样控制一下
llddy 2010-09-21
- 打赏
- 举报
可以而给你们些思路
<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>
烟火人间-红尘一笑 2010-09-21
- 打赏
- 举报
我碰到过。 给你思路。
在加载图片的时候判断图片的大小。超过iframe大小了，用js设定其大小。
---------------------------------------------------------
但问题是图片加载时在网页中无法用js获取其尺寸，但有一个变相的办法获得。
加载时你把图片隐藏，onload之后用js读取其大小，处理完毕后再显示出来就OK啦...
在加载图片的时候判断图片的大小。超过iframe大小了，用js设定其大小。
---------------------------------------------------------
但问题是图片加载时在网页中无法用js获取其尺寸，但有一个变相的办法获得。
加载时你把图片隐藏，onload之后用js读取其大小，处理完毕后再显示出来就OK啦...
llddy 2010-09-21
- 打赏
- 举报
因为这个iframe不仅仅要显示 图片 还有txt，doc，excel。目前只有图片的时候难控制。
kaifadi 2010-09-21
- 打赏
- 举报
不知道用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
});
不知道这个思路可否！没有测试过，随便写写，如有错误，还望多多包含！
$("#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
});
不知道这个思路可否！没有测试过，随便写写，如有错误，还望多多包含！
碧海情天-赵亮 2010-09-21
- 打赏
- 举报
只是为了显示图片的话,为什么用iframe来故意制造麻烦呢,为什么不直接用<img>?
happy664618843 2010-09-21
- 打赏
- 举报
[Quote=引用 6 楼 lieri111 的回复:]
JScript code
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)
{
imgAr……
[/Quote]+1
JScript code
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)
{
imgAr……
[/Quote]+1
llddy 2010-09-20
- 打赏
- 举报
其实就是为了不让iframe出现滚动条，这样用户看起来很直观。
然后图片还能等比例缩小。用css或者js控制都可以。
只要能达到预期的效果
然后图片还能等比例缩小。用css或者js控制都可以。
只要能达到预期的效果
