网上淘到的很帅的自适应的iframe代码

最新推荐文章于 2022-06-15 16:40:16 发布
最新推荐文章于 2022-06-15 16:40:16 发布 · 97 阅读 · 0
文章标签：

#xhtml

本文介绍了一种通过JavaScript实现iframe自适应高度的方法。该方法能够确保iframe的内容完全显示，同时避免出现不必要的滚动条。通过调整iframe的高度来匹配其内容的实际高度，提高了网页布局的美观性和用户体验。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<iframesrc="x.htm"name="content"id="content"allowtransparency="true"align="default"marginwidth="0"marginheight="0"frameborder="0"scrolling="no"height="200"width="780"onload="this.height=0;varfdh=(this.Document?this.Document.body.scrollHeight:this.contentDocument.body.offsetHeight);this.height=(fdh&gt;200?fdh:200)">Thismessageisonlyvisibletoolderbrowsers.</iframe>
</body>
</html>

x.htm为被包含的页面


iteye_15153
关注
好看的frameset实例
09-18
网页制作中常用的frame效果模板，很好看
IFrame跨域高度自适应实现代码
09-05
然而，当涉及到跨域时，IFrame的高度自适应问题会变得复杂。本文将深入探讨如何实现IFrame跨域高度自适应的解决方案。 首先，我们需要了解什么是跨域。在Web安全策略中，浏览器执行同源策略，这意味着一个网页只能...
iframe相关，iframe样式
胡杰的专栏
03-15 1万+
当要在自己网页内嵌别人的网页时，总会碰到样式等方面的问题，浏览器兼容性问题最多 1   此处背景色background-color:#000000;设为与要嵌套页的背景色一致较为和谐。 2 width="1250px" height="700px" 此处的高度，宽度要调到内嵌页刚好全屏的尺寸，并scrolling="auto" 否则会有两个滚动条，不好看
分散对齐,iframe,漂亮的标签页
TO
10-28 518
分散对齐：   &lt;label style="width: 53px;text-align:justify;text-justify:distribute-all-lines;text-align-last:justify"&gt;备注:&lt;/label&gt;   iframe： &lt;iframe name="" src="about:blank" style="z-ind.
iframe src为图片时的高度自适应的代码
12-04
在网页开发中，`iframe` 是一种非常有用的元素，它允许我们嵌入其他网页或内容到当前页面中。然而，当`iframe`加载的内容是图片时，如何让`iframe`的高度自适应图片的大小就成为一个挑战。传统的解决方法是通过获取`...
精选资源
iframe 自适应大小实现代码
01-21
A域名下的页面a.html中通过iframe嵌入B域名下的页面b.html,由于b.html的宽度和高度是不可预知而且会变化的,所以需要a.html中的iframe自适应大小. 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的...
jQuery解决iframe高度自适应代码
10-29
总结来说，利用jQuery实现iframe的高度自适应是一个技术含量相对较高的任务，涉及到iframe标签的使用、jQuery的DOM操作能力、事件监听机制以及跨浏览器兼容性问题等多个知识点。虽然本文提供的示例代码在特定环境下...
漂亮div展示图片,ajax,iframe,html内容highslide-3.3.22.zip
07-24
下载了使用就知道,我没骗你,类似jbox功能,但又很多jbox没有的功能,特别是图片的展示,不同于thickbox展示方式,多种样式可以选择,圆角,方角,caption,上一张下一张等等
好看的网站布局5
qs1571292935的博客
08-20 1019
鲜明的色彩对比 Capellos 所提供的产品是各种面点，从包装到网页设计都采用的是强对比的黑白色，搭配点缀的红色，整体散发出一种协调而鲜明的视觉效果，协调而对比强烈。 40. 以字体排版为中心的设计 高清大图往往会让用户忘记，以字体排版为重心的设计有多么美妙。精致的线条，别具一格的排版，精致的图片和独特的栅格，整个网站看起来像是一个高端的画廊。
修改 iframe 滚动条样式使其更美观、好看，具有隐蔽性
u012442504的专栏
06-23 7160
代码如下： /*- scrollbar -*/ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-thumb{ background-color: #999; -webkit-border-radius: 5px; border-rad
超强，用CSS构建iframe效果
zgqtxwd的专栏
04-30 786
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
HTML/CSS 一个非常漂亮的收藏列表样式
热门推荐
qq_38959715的博客
04-30 2万+
先上效果图: 收藏列表 代码部分一（HTML） <!DOCTYPE html> <html lang="en"> <head > <meta charset="UTF-8"> <title>Title</title> <script type="text/javascrip...
怎么制作一个好的iframe，iframe各个属性详细分析，个人拙见
11-18 623
iframe作为一个网站之间交互的桥梁，受到很多站长的喜爱，但是又有不安全的因素存在，所以正确填写属性是很重要的。 <iframe name="my_iframe" height="540" width="100%" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" border="0" src="[url]htt...
iframe 高度自适应的方法
我的专栏
06-15 1687
页面中使用iframe嵌套其他页面，如果出现滚动条，确实不好看，如果想不滚动就得让 iframe 高度自适应。 以下代码可以实现获取嵌套body的高度： 或者可以使用scrollHeight属性获取指定区域的高度、宽度 scrollHeight 属性是一个只读属性，它返回该元素的像素高度，高度包含内边距（padding），不包含外边距（margin）、边框（border），是一个整数，单位是像素 px。...
实现iframe高度自适应的代码与演示页面
iframe高度自适应的核心在于动态获取嵌入页面的内容高度，并将该高度应用到iframe上。由于浏览器的安全策略限制，直接访问跨域iframe的内容是不允许的。因此，实现iframe高度自适应的前提是嵌入的页面与主页面同源...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值