iframe自适应(子页面)高度(不会出现滚动条),并且高度不用写固定

<!--这是链接浮动框架的入口  target值等于到对应的iframe的name属性值-->

<!--href对应的是具体的页面-->

<a href="index.html" target="content">index.html</a>

<!--iframe就是子页面(href对应的页面)在本页面所处的位置,高宽等-->

<!--iframe的name属性值需要和a标签的target值相等-->
<iframe src="index.html" name="content" style="width:100%" οnlοad="setHeight(this)"></iframe>
<script>

/*此函数就是自适应高度*/
    function setHeight(el) {
        el.style.height = el.contentWindow.document.body.offsetHeight + 'px'
    }
</script>

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中实现iframe自适应高度和去除滚动条可以通过以下方法: 1. **自适应高度**: - 监听iframe加载事件,获取其内容高度,然后动态设置iframe高度。这可以通过原生JavaScript或Vue的方法实现。 - 使用Vue的响应式数据来监听变化,并更新iframe高度。 示例代码如下: ```javascript <template> <div> <iframe ref="iframe" :src="iframeSrc" @load="iframeLoaded" style="width: 100%; height: 100%; border: none;" ></iframe> </div> </template> <script> export default { data() { return { iframeSrc: 'http://example.com', iframeHeight: 0, }; }, methods: { iframeLoaded() { const iframe = this.$refs.iframe; const newHeight = iframe.contentWindow.document.body.scrollHeight || iframe.contentWindow.document.documentElement.scrollHeight; this.iframeHeight = newHeight; }, }, }; </script> ``` 在上面的示例中,我们使用了Vue的ref属性来获取iframe元素,并在iframe加载完成后调用`iframeLoaded`方法来获取内容的实际高度,并更新到`iframeHeight`中,从而实现高度自适应。 2. **去除滚动条**: - 通过设置CSS样式`overflow: hidden;`或者`overflow: auto;`(不显示滚动条),可以直接去除iframe内部的滚动条。 - 如果无法直接控制iframe内容页面样式,可以通过JavaScript来动态修改样式。 示例代码如下: ```css .iframe-container { overflow: hidden; /* 去除滚动条 */ } ``` 将这个类应用到包含iframe的父元素上,即可去除滚动条
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值