layui tab选项卡的实现和iframe配合，iframe自适应高度(支持本地和跨域)

最新推荐文章于 2023-07-13 06:30:00 发布
最新推荐文章于 2023-07-13 06:30:00 发布
阅读量9.6k 收藏 8
点赞数 6
原文链接：https://gitee.com/gksyun/codes/qpyv549d6z3bxgma2fn7154
版权

原文地址： https://gitee.com/gksyun/codes/qpyv549d6z3bxgma2fn7154

iframe 高度自适应

<html>  
<head>
</head>  
  <link rel="stylesheet" href="./plugins/layui/css/layui.css" media="all">
<body>  
<div class="layui-tab layui-col-xs12" lay-filter="demo" lay-data="{ height:332}">  
    <ul class="layui-tab-title">  
        <li class="layui-this">hao123</li>  
        <li>百度</li>  
        <li>layui的button</li>  
    </ul>  
    <div class="layui-tab-content">  
        <div class="layui-tab-item layui-show">  
            <iframe class='layui-col-xs12' src="http://www.hao123.com"></iframe>  
        </div>  
        <div class="layui-tab-item" >  
            <iframe class='layui-col-xs12' src="http://www.taobao.com"></iframe>  
        </div>  
        <div class="layui-tab-item">  
            <button class="layui-btn layui-btn-normal">百搭按钮</button>  
        </div>  
    </div>  
</div>  
    <script src="./plugins/layui/layui.js"></script>
    <script>
        layui.use(['element','jquery'], function() {
            var element = layui.element;
            var $ = jQuery = layui.jquery;
            var items = ["位运算"];
            FrameWH();
            for(var i = 0;i<items.length;i++){
                console.log(items[i]);
            }
            
            function FrameWH() {
            var h = $(window).height()-100;
            $("iframe").css("height",h+"px");
        }
 
        $(window).resize(function () {
            FrameWH();
        });
            
        });
    </script>
</body>

</html>

昵称都存在了吗？
关注
  • 6
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
IFrame跨域高度自适应实现代码
09-05
最近在做项目中，遇到一个问题，就是iframe高度的自适应问题，以下是解决办法
layui tab嵌入iframe 高度自适应
亮大大的博客
11-13 3495
--layui-body 标签内容：修改style属性 <div class="layui-body"> <div class="layui-tab" lay-filter="main" lay-allowClose="true" style="height: 100%;margin: 0px;overflow: hidden;"> ...
layui中iframe自适应高度
艾小逗
04-04 5814
layui中iframe自适应页面高度 // 窗口自适应 $(window).on('resize', function() { AdminInit(); // iframe窗口自适应 var $content = $('#nav_xbs_tab .layui-tab-content'); $content.height($(this).height() - 125); ...
layui tab iframe 自适应高度
qq_1521514763的博客
04-23 4053
<iframe class="myiframe" data-frameid="'+id+'" scrolling="no" frameborder="0" src="'+url+'" height="100%" style="width:100%;" ></iframe> FrameWH(); function FrameWH() { //获取body高度...
layui的基本元素之一-----选项卡
water_java的博客
08-29 596
layui的基本元素之一-----选项卡默认风格的Tab动态操作TabHash地址定位简洁风格的Tab卡片风格的TabTab数超过一定宽度 选项卡：class=“layui-tab” JavaScript代码需加载element模块，才可以实现tab的功能 默认风格的Tab <fieldset class="layui-elem-field layui-field-title" style=...
使用iframe遇到的问题
qq_24184997的博客
02-27 1088
1：在iframe中使用layer弹框引发的一些问题 弹框后，出现子窗口高度不够，导致显示内容不全 使用iframe 代码如下： &amp;lt;div class=&quot;layui-tab-content&quot; style=&quot;min-height: 150px; padding: 0 0 0 0;&quot;&amp;gt; &amp;lt;div class=&quot;layui-tab-item layui
LayUI之动态选项卡Tab&iframe使用
m0_62604616的博客
07-18 1284
可以看见已经更改了，但是有重复的，所以我们要进行再一次的优化。将官网中任意一种选项卡的代码复制下来，粘贴到你要用的地方。然后我们PermissionDao这个类也进行改动。①、查找layui的选项卡页面布局代码--静态。④重复的tab选项卡不添加，改为选中。只要将openTab方法进行改动即可。③优化UserAction。③、将选项卡名称换成菜单名。①创建实体类User。...
利用location.hash实现跨域iframe自适应
12-10
页面域关系： 主页面a.html所属域... 问题本质: js对跨域iframe访问问题,因为要控制a.html中iframe的高度和宽度就必须首先读取得到b.html的大小,A、B不属于同一个域,浏览器为了安全性考虑，使js跨域访问受限,读取不到b.
JS解决iframe之间通信和自适应高度的问题
10-21
关于iframe之间的通信问题与自适应高度问题网上有很多，那么这篇文章小编也和大家一起来谈谈iframe之间通信问题及iframe自适应高度问题，有需要的可以参考借鉴。
如何设置iframe高度自适应在跨域情况下的可用方法
09-05
iframe的高度需要根据子页面的实际高度来进行调整，但是如果子页面不在同一域中怎么办？这时候脚本没有办法获取到子页面的高度，存在JavaScript跨域的问题
layui中导航元素的简单使用
ToBeXX的博客
09-26 8021
整体效果图 所需界面 main.html界面代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>后台管理</title> <link rel="stylesheet" href="layui/css/...
layui tab 宽高自适应的暂时解决方式
GinChou的萌新博客
05-26 1528
tab 需要实现嵌入IFrame 时能够自主适应当前页面的宽高情况。 1、嵌入的IFrame： element.tabAdd('tab', { title: name, content: '<iframe onload="FrameWH()" height="100%" width="100%" scrolling="auto" data-frameid="' + id + '" frameborder="0" s
原 layui之Tab选项卡 - 页面元素
丿灬安之若死
03-19 4266
Tab广泛应用于Web页面，因此layui也对其进行了良好的支持。Layui内置多种Tab风格，支持删除选项卡、并提供响应式支持。 这是一个最基本的例子： <div class="layui-tab"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> ...
LayUI动态选项卡&iframe使用
weixin_67450855的博客
07-19 2513
LayUI选项卡，优化登录界面
前端框架Layui实现动态选项卡&iframe使用（附源码）
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
07-13 3902
iframe（内嵌框架）是HTML中的一个标签，用于在网页中嵌入另一个页面或文档。通过使用iframe标签，可以在网页中创建一个独立的内联框架，用于显示来自不同源或同一源的外部内容。这个嵌入的页面可以是其他网页、视频、地图、广告等等。src：指定要加载的内容的URL。width：指定`iframe`的宽度。-height：指定`iframe`的高度。frameborder：指定是否显示边框。scrolling：指定是否显示滚动条。
layui,iframe高度设置踩的坑
weixin_43075758的博客
06-24 3508
场景重现： 后台管理系统，一个列表点击编辑，新增后，最低下的提交按钮显示不出来了，固定高度可以，但是太笨重，如果中间有变化，那又会显示不出来 。页面框架是layui 1).我在浏览器上更改这两个的高度为100%提交按钮就出来了。但是我在jsp页面怎么更改都不行如图三 图一： 图二：在浏览器上改layer.css文件是可以的 图三：在jsp上试图替换之前的样式，但是没有效果 我发现这个页面的高度和别的页面的高度不一样，图四按钮显示不出来的页面高度是1043px和1086px,而正常的页...
使用position解决layui的iframe宽高自适应的问题
Night_X的博客
12-05 8613
html需要的结构 &amp;amp;amp;amp;amp;amp;amp;amp;lt;div class=&amp;amp;amp;amp;amp;amp;amp;quot;parent&amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;iframe class='son' frameborder=&
layui tab控件中载入外部html页面
热门推荐
djshichaoren的专栏
10-23 2万+
目前，潜入外部网页的方式，主要有3种： iframe方式 ajax方式 ajax加载数据后，直接赋予 externalHtml.innerHTML 即可。 script脚本方式 第一种方式的示例 hao123 百度 layui的button
iframe跨域高度自适应
最新发布
08-25
为了实现iframe的跨域高度自适应，你可以使用以下步骤： 1. 在父页面中，先获取到子页面的高度。可以通过子页面中的某个元素或者API来获取子页面的高度信息。 2. 使用window.postMessage方法将子页面的高度发送给父页面。在子页面中，需要监听message事件，并将子页面的高度发送给父页面。 在父页面中，添加以下代码： ```javascript // 监听来自子页面的消息 window.addEventListener('message', function(e) { // 确保消息来自于预期的子页面 if (e.origin !== '子页面的域名或URL') { return; } // 获取子页面传递过来的高度 var height = parseInt(e.data); // 设置iframe的高度 document.getElementById('yourIframeId').style.height = height + 'px'; }); ``` 在子页面中，添加以下代码： ```javascript // 获取子页面的高度 function getHeight() { var height = document.body.offsetHeight; // 将高度信息发送给父页面 window.parent.postMessage(height, '父页面的域名或URL'); } // 监听父页面传递过来的消息 window.addEventListener('message', function(e) { // 确保消息来自于预期的父页面 if (e.origin !== '父页面的域名或URL') { return; } // 获取父页面传递过来的高度 var height = parseInt(e.data); // 设置子页面的高度 document.body.style.height = height + 'px'; }); // 在页面加载完成后获取页面高度并发送给父页面 window.onload = function() { getHeight(); }; ``` 在上述代码中，你需要替换`子页面的域名或URL`和`父页面的域名或URL`为你实际使用的域名或URL。`yourIframeId`需要替换为你iframe元素的ID。 通过这种方式，子页面可以将自身的高度信息发送给父页面，父页面则可以根据接收到的高度信息来动态调整iframe的高度，实现跨域高度自适应。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值