iframe自适应Word文档格式.docx
- 文档编号:19465556
- 上传时间:2023-01-06
- 格式:DOCX
- 页数:9
- 大小:21.55KB
iframe自适应Word文档格式.docx
《iframe自适应Word文档格式.docx》由会员分享,可在线阅读,更多相关《iframe自适应Word文档格式.docx(9页珍藏版)》请在冰豆网上搜索。
}
/script>
如果是同一个域名下的不同子域,设置下document.domain就行了
IE6和IE7中的iframe没有contentDocument属性,而且如果iframe里的页面在同域下的不同子域,通过iframe.Document.documentElement.scrollHeight获取到的高度是错误的,所以还是建议用iframe.contentwindow.document来获取高度(addedat2010-03-22)
2.跨域下的iframe自适应高度
跨域的时候,由于js的同源策略,父页面内的js不能获取到iframe页面的高度。
需要一个页面来做代理。
方法如下:
假设下的一个页面a.html要包含下的一个页面c.html。
我们使用下的另一个页面agent.html来做代理,通过它获取iframe页面的高度,并设定iframe元素的高度。
a.html中包含iframe:
在c.html中加入如下代码:
iframeid="
c_iframe"
height="
width="
src="
display:
none"
>
(functionautoHeight(){
varb_width=Math.max(document.body.scrollWidth,document.body.clientWidth);
varb_height=Math.max(document.body.scrollHeight,document.body.clientHeight);
varc_iframe=document.getElementById("
c_iframe.src=\'
#\'
})();
最后,agent.html中放入一段js:
varb_iframe=window.parent.parent.document.getElementById("
varhash_url=window.location.hash;
if(hash_url.indexOf("
#"
)>
=0){
varhash_width=hash_url.split("
)[1].split("
|"
)[0]+"
px"
;
varhash_height=hash_url.split("
)[1]+"
b_iframe.style.width=hash_width;
b_iframe.style.height=hash_height;
agent.html从URL中获得宽度值和高度值,并设置iframe的高度和宽度(因为agent.html在下,所以操作a.html时不受JavaScript的同源限制)
Iframe自适应高度
作者:
佚名
文章来源:
不详
点击数:
5122
更新时间:
2008-4-11
热
%ifrequest("
infoid"
)<
thensetrs=conn.execute("
select*fromnproductwhereid="
&
request("
))ifnot(rs.eofandrs.bof)thenproname=rs("
proname"
)content=rs("
proinfo"
)endifrs.closesetrs=nothingendif%>
scriptlanguage="
JavaScript"
<
br/>
//**iframe自动适应页面**//<
//输入你希望根据页面高度自动调整高度的iframe的名称的列表<
//用逗号把每个iframe的ID分隔.例如:
["
myframe1"
"
myframe2"
],可以只有一个窗体,则不用逗号。
//定义iframe的ID<
variframeids=["
content"
]<
//如果用户的浏览器不支持iframe是否将iframe隐藏yes表示隐藏,no表示不隐藏<
variframehide="
yes"
functiondyniframesize()<
{<
vardyniframe=newArray()<
for(i=0;
i<
iframeids.length;
i++)<
if(document.getElementById)<
//自动调整iframe高度<
dyniframe[dyniframe.length]=document.getElementById(iframeids[i]);
if(dyniframe[i]&
!
window.opera)<
dyniframe[i].style.display="
block"
if(dyniframe[i].contentDocument&
dyniframe[i].contentDocument.body.offsetHeight)//如果用户的浏览器是NetScape<
dyniframe[i].height=dyniframe[i].contentDocument.body.offsetHeight;
elseif(dyniframe[i].Document&
dyniframe[i].Document.body.scrollHeight)//如果用户的浏览器是IE<
dyniframe[i].height=dyniframe[i].Document.body.scrollHeight;
}<
//根据设定的参数来处理不支持iframe的浏览器的显示问题<
if((document.all||document.getElementById)&
iframehide=="
vartempobj=document.all?
document.all[iframeids[i]]:
document.getElementById(iframeids[i])<
tempobj.style.display="
if(window.addEventListener)<
window.addEventListener("
load"
dyniframesize,false)<
elseif(window.attachEvent)<
window.attachEvent("
onload"
dyniframesize)<
else<
window.onload=dyniframesize<
IFRAMEid=MyFrameborder=0name=mainmarginWidth=0
marginHeight=0src="
myframe.html"
frameBorder=No
width="
100%"
scrolling=no
onload=this.height=MyFrame.document.body.scrollHeight>
/IFRAME>
跨域显示有权限问题,要进一步研究!
Sourcepath:
svn/
trunk/
iframe自适应高度.html
∙‹r39
r44
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
title>
/title>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
functionframeAutoHeight(o){
varwin=o.contentWindow;
o.style.height=win.document.documentElement.scrollHeight+"
}
/head>
body>
iframe.html"
scrolling="
frameAutoHeight(this)"
/body>
/html>
--
×
Ó
Ò
³
Ã
æ
Ê
¹
£
º
document.onload=ddd();
functionddd(){
varnewHeight=
document.body.clientHeight;
variframe22=window.parent.document.getElementById("
reinitIframe"
iframe22.height
=iframe22.contentWindow.document.body.scrollHeight+"
}
-->
iframe删除.js
∙‹r16
r40
33
34
35
36
//==UserScript==
//@namespace
//@author
StephenChapman
//@name
iframekiller
//@description
deletesalliframesfromawebpage
//@include
//==/UserScript==
while((el=document.getElementsByTagName('
iframe'
)).length){
el[0].parentNode.removeChild(el[0]);
/*
try{
vartestFrame=eqdiv.children("
iframe"
)[0];
vardoc=testFrame.contentDocument;
if(doc==undefined||doc==null){
doc=testFrame.contentWindow.document;
testFrame.contentWindow.location.replace("
about:
blank"
doc.write('
'
doc.clear();
}catch(err){
};
eqdiv.remove();
eqdiv=null;
CollectGarbage();
*/
Hidedetails
Changelog
r40
bycssrainonOct27,2009
Diff
[Nologmessage]
iframe高度自适应
1、目的
系统通过一内嵌页面(iframe)来展现网页内容(也包括内嵌页中再嵌一个网页),这将会引起如下几个问题:
a.不同的网页内容多少不一致,导致iframe的高度无法与实现内容或浏览器高度相匹配。
b.窗口缩放时,不能iframe不能进行自动调整。
针对这两个问题,写了一些js方法,使iframe自动适应内容或浏览器高度。
2、js代码
在主框回页面中包括如下js方法:
/**
*
内嵌页面的高度设置
*/
function
handleFrameLoad()
{
var
hDoc
=
getBodyHeight(document);
tblmain
document.getElementById('
tblMain'
mFrame
window.mainFrame;
hFrameDoc
getFrameHeight(mFrame);
hTable
hDoc-80;
//减去该页面除iframe外其他控件所占的高度.
if(hFrameDoc
hTable)
hFrameDoc;
tblmain.style.height
hTable;
mFrame.height
if(window.mainFrame.moduleRight
null){
//表示该内嵌页,包含内嵌的页面,页iframe的id固定为moduleRight。
initFrameHeight(mFrame,hTable);
获取当前页面的高度
getBodyHeight(doc){
if(doc.all)
return
doc.body.offsetHeight;
else
doc.body.scrollHeight;
获取内嵌页中的高度.
若另含子内嵌(moduleRight)页时,应考虑该页面的高度.
getFrameHeight(mFrame){
h1
mFrame.document.body.offsetHeight;
h2
mFrame.document.body.scrollHeight;
if(mFrame.moduleRight
h3
mFrame.moduleRight.document.body.scrollHeight;
if(h3
h2)
h3;
h2;
设置子内嵌页面的高度.
*通过设置iframe所在table的高度来调整。
initFrameHeight(frame,hFrame){
tbl
frame.document.getElementById('
tblMainFrame'
tbl.style.height
hFrame;
3、其他设置
主页面(main.jsp),在加载完毕(onload)、窗口大小调整(onresize),以及iframe的加载完毕时,需调用:
handleFrameLoad,代码如下:
html>
body
onload="
handleFrameLoad();
onResize="
src="
id="
mainFrame"
name="
border=0
width=100%
height=100%
frameborder="
marginwidth="
hspace="
/>
/html
其他内嵌页如下(注:
此处的iframe高度设为100%,其高度由父页面通过设置table<
tblMainFrame>
的高度来进行调整):
class="
body"
style="
overflow:
hidden;
margin:
padding:
0px"
table
height="
tblMainFrame"
border="
align="
center"
cellpadding="
cellspacing="
tr>
td
id='
content'
height=100%>
moduleRight"
/td>
/tr>
/table>
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- iframe 自适应