精华内容
下载资源
问答
  • 1.HTML页面代码片段 <!-- 左侧导航区域,参照官方实例模板 --> <div class="layui-side layui-bg-black"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree" lay-...

    效果示例
    在这里插入图片描述

    1.HTML页面代码片段

    <!-- 左侧导航区域,参照官方实例模板 -->
    <div class="layui-side layui-bg-black">
    	<div class="layui-side-scroll">
    		<ul class="layui-nav layui-nav-tree"  lay-filter="left_nav">
    			<li class="layui-nav-item layui-nav-itemed">
    				<a class="" href="javascript:;">设备管理</a>
    				<dl class="layui-nav-child">
    					<!-- 此处用lay-id存放页面url相关内容 -->
    					<dd><a href="javascript:;" lay-id="tblDevice">设备列表</a></dd>  
    				</dl>
    			</li>
    		</ul>
    	</div>
    </div>
    <!-- 内容主体区 -->
    <div class="layui-body" style="bottom:0px">
    	<div style="height:100%; background-color:#DCDCDC">
    		<!-- 可删除的Tab选项卡 -->
    		<div class="layui-tab" lay-allowClose="true" lay-filter="pageTab" style="background-color:#DCDCDC">
    			<ul class="layui-tab-title" style="background-color:white">
    				<!-- 设置不可删除的固定的首页 并设置lay-id为home-->
    				<li class="layui-this" lay-id="home"><i class="layui-icon layui-icon-home"></i>首页</li>
    			</ul>
    			<div class="layui-tab-content" style="margin-top:15px;margin-bottom:5px;height: 100%;overflow-y: hidden; background-color:white">
    				<!-- 设置不可删除的固定首页主体 -->
    				<div class="layui-tab-item layui-show" lay-allowClose="false">这里是首页的内容</div>
    			</div>
    		</div>
    	</div>
    </div>
    

    2.js代码部分

    <!-- Jquery Js -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!-- Layui Js -->
    <script th:src="js/layui/layui.js"></script>
    <!-- TabChange Js tab切换不重复相关js -->
    <script type="text/javascript" src="js/tabChange.js"></script>
    <script>
    layui.use('element', function(){
    	var element = layui.element;
    	FrameWH();
    	//【※不可删除的固定首页————tab去掉×号】
    	$(".layui-tab ul").children('li').first().children('.layui-tab-close').css("display",'none');
    	//【※※页面不会重复开启】
    	var arry = new TabList;
    	//【※※arry.add将首页的lay-id添加进数组(如果tab栏没有固定首页忽略这条)】
    	arry.add('home');
      	//左侧导航栏(nav监听事件)
    	element.on('nav(left_nav)',function(data){
    		//此处判定是否是二级导航栏,二级导航栏的lay-id为请求的url片段,为空则为一级导航栏
    		//【※※arry.find判断Tab的lay-id是否存在】
    		if(this.getAttribute('lay-id') != null && arry.find(this.getAttribute('lay-id'))){
    			//点击添加Tab选项卡
    			element.tabAdd('pageTab',{
    		  		title:data.context.innerText,
    		  		//此处动态嵌入iframe
    		  		content:'<iframe id="iframe" scrolling="yes" style="width:100%;height:100%" frameborder="0" src="http://localhost:8080/' + this.getAttribute('lay-id') + '" class="x-iframe"></iframe>',
    	  			id: this.getAttribute('lay-id')
    			});
    			//【※※arry.add将Tab的lay-id添加进数组】
    			arry.add(this.getAttribute('lay-id'));
    		}
    		element.tabChange('pageTab', this.getAttribute('lay-id'));
    		//【※※※Tab页面显示不全】
    		FrameWH();
    	});
    	//可删除的Tab选项卡(点击事件)
    	element.on('tabDelete(pageTab)', function(elem){
    		//【※※arry.remove关闭页面时将数据移除】
    		arry.remove(elem.elem.context.parentElement.getAttribute('lay-id'));
    	});
    	
    });
    </script>
    

    3.FrameWH

    //【※※iframe页面显示不全函数FrameWH】
    function FrameWH() {
    	var height = $(window).height()-20;
    	$(".layui-tab-content").css("height",height+"px");
    	$("iframe").css("height",height+"px");
    }
    

    4.tabChange.js相关

    function TabList(){
    	var list = new Array();
    	this.add = function(name){
    		list.push(name);
    	}
    	this.remove = function(name){
    		for(i = 0 ; i < list.length ; i++){
    			if(name == list[i]){
    				list.splice(i,1);
    			}
    		}
    	}
    	this.find = function(name){
    		for(i = 0 ; i < list.length ; i++){
    			if(name == list[i]){
    				return false;
    			}
    		}
    		return true;
    	}
    }
    
    展开全文
  • html页面iframe引入公共导航跳转子页面内容不显示或显示不全的问题 今天写页面有好几个页面要用一样的导航栏,所以就写了公共的head.html页面。但是发现用jQuery的load方法引入的时候总是报跨域问题,jQuery我是...

    html页面用iframe引入公共导航跳转子页面内容不显示或显示不全的问题

    今天写页面有好几个页面要用一样的导航栏,所以就写了公共的head.html页面。但是发现用jQuery的load方法引入的时候总是报跨域问题,jQuery我是cdn引入的。懒得解决跨域和下载jQuery。便用了iframe引入。发现会出现一个问题,那就是导航栏点击跳转子页面他的页面会放在iframe的盒子里。

    这个问题用一行代码就可以解决,给a标签加一个target属性

    target="_parent"

    看下我的代码

    head.html

    <li>

           <a href="./index.html" target="_parent">首页</a>

     </li>

    引入head.html的页面写法

    <iframe src="header.html" width="100%"; height="60px" frameborder="0" scrolling="no" name="headFrame"></iframe>

    展开全文
  • (比较常见的问题,就是iframe页面中,经常会出现内容显示不全的时候)。 谨记,通过js去计算高度,最最要紧的就是,包着所有元素包住了里面的元素,也就是body的高度、其他元素的高度都是存在,一般只要记住清除...

      使用过iframe的人,都知道,它是一个模版,里面有一个iframe,而iframe当中,是可以嵌套多个页面的。(比较常见的问题,就是iframe页面中,经常会出现内容显示不全的时候)。

          谨记,通过js去计算高度,最最要紧的就是,包着所有元素包住了里面的元素,也就是body的高度、其他元素的高度都是存在,一般只要记住清除浮动应该就不会有什么问题(这是我的老毛病,故而要告诉别人防患于未然)。

      下面这段脚本是直接放在子页面里面的

    <script type="text/javascript">
            var oIframe = window.top.document.getElementById("ifrma1");
            var oBody = document.getElementsByTagName("body")[0];
            oIframe.style.height = oBody.offsetHeight + 40 + 'px';
    </script>

     

     

    转载于:https://www.cnblogs.com/wanliyuan/p/3805666.html

    展开全文
  • 原文地址:... ...用到了layui,但是却发现,弹窗虽然固定了高宽,但是里面的下拉框,在显示的时候却被弹窗挡住了,导致信息显示不全,也没滚动条。 后来研究才知道在layui内部样式...

    原文地址:https://blog.csdn.net/u013110682/article/details/81165993 感谢博主分享

    问题描述:在做后台的时候想要实现这样一个功能,点击弹出一个窗口,窗口是下拉选择框,给用户选择。用到了layui,但是却发现,弹窗虽然固定了高宽,但是里面的下拉框,在显示的时候却被弹窗挡住了,导致信息显示不全,也没滚动条。

    后来研究才知道在layui内部样式中,对.layui-layer-content定义了overflow属性且为hidden,只要取消这个属性,就不存在遮挡问题。

    关于overflow:所以解决办法可以去掉自己页面中的body体中的class="layui-layout-body"即可,因为正如上面所述,layui的layui-body样式是overflow:hidden截取了

    所以解决办法可以去掉自己页面中的body体中的class="layui-layout-body"即可,因为正如上面所述,layui的layui-body样式是overflow:hidden截取了

    展开全文
  • 问题描述:在做后台的时候想要实现这样...用到了layui,但是却发现,弹窗虽然固定了高宽,但是里面的下拉框,在显示的时候却被弹窗挡住了,导致信息显示不全,也没滚动条。 layer.open({ id:'edit', type: 2, ...
  • 最近在vue项目中遇到引入外部html页面问题,直接使用了iframe标签显示不全,最后用缩放的思路解决 代码如下: <div class="iframe-father"> <iframe :src="pdfUrl" width="920px" id="iframe1" style=...
  • layUI的页面显示不全解决方法

    千次阅读 2018-10-20 14:56:45
    在做项目时页面显示不全   可以在layui的css中直接改属性 layui-tab-item 找到这个属性,直接修改高度,如果是谷歌浏览器的话记得清缓存。 还有就是在嵌入时修改属性 &lt;iframe scrolling="no&...
  • 高手们大家好,我在使用easyui时出现一个问题,在主页面layout的center区域中加载一个页面,结果却显示不全: 主页面结构: ;"> ;"> <div data-options="region:'center'" "><div > ;"> 脚本: $('lyt_...
  • session失效或过期,用iframe标签后显示全页登录界 在登录页面加 <script language="JavaScript"> if (window != top) { top.location.href = location.href; } </script> C#中如何...
  • layui 界面显示不全

    千次阅读 2018-11-27 16:13:14
    刚在开发 layui 时碰到的一个问题,在我通过点击权限树节点,打开的 iframe 框架的页面显示不全   jsp页面 layui 主体 body 内打开页面 &lt;div class="layui-body" id="container"&...
  • 页面B内容很长,浏览器一两屏显示全。 B页面相关内容在网页最前端有目录连接list1, list2, 点击list1或者list2浏览器向下滚动到content1或者content2处。即需要在同页面中使用锚点连接机制 解决思路...
  • //打印 iframe 页面 var iframe=document.getElementById("printIframe"); iframe.contentWindow.print(); 页面: bug效果, 解决之后的效果: 解决方法: 打印的高度是页面的高度,页面的高度是内容撑...
  • 我们之前讲过登录页面显示不全问题,知道其实很多关于显示的问题,其中有编译的原因,而大部分的问题都是由于显示的尺寸不对所导致的。 有用户就提出在使用iframe集成到自己的平台页面时,页面侧边出现滚动条,而...
  • IFrame语法小

    2006-01-16 14:32:00
    IFrame可以在网页内嵌入另一个页面,类似“画中画”形式。 标记的使用格式是: src:文件的路径,既可是HTML文件,也可以是文本、ASP等; width、height:"画中画"区域的宽与高; scrolling:当SRC的指定的HTML文件在...
  • java项目,在一个页面上右键点击打印,打印预览的是当前屏幕所能显示到的,屏幕以外的(也就是需要滚动条滚动才能看到的)显示不出来。 不知道是不是因为我使用了多个iframe的原因,但是我在代码里某个iframe里...
  • WebView 打开带Frameset Tag的Html文件时,经常显示不全,只显示最后一个页面。 需要简单设置之后就可以了 覆盖shouldOverrideUrlLoading, 并返回false; mWebView.setWebViewClient(new WebViewClient() { ...
  • 原 controller : $scope.myURL = URL; ...发现页面不能打开 中的内容。 现在将 controller 中改写如下 即可: $scope.myURL = $sce.trustAsResourceUrl(URL); //URL 为链接($sce.
  • iframe框架优缺点

    2018-05-12 21:14:00
    iframe优点: 1、重载页面时不必整个页面...2、移动设备页面上框架显示不全 3、不容易打印 4、框架页面过多会增加服务http请求,且不易管理 5、浏览器的后退按钮失效 转载于:https://www.cnblogs.com/liangqili...
  • 页面B内容很长,浏览器一两屏显示全,需要滚动显示。 当浏览器滚动的时候,iframe B页面中的某一内容能需要固定在窗口的某一位置。如下图中的 回到顶部按钮。 解决思路: iframe页面初始化时...
  • iframe设置scrolling="no"的话子页面内容显示不全,不设置又会出现滚动条从而影响美观。当我们点击不同的菜单让iframe加载不同的html文件时,iframe的高度就需要做相应的调整。 主体思路:子页面加载完成后根据...
  • 在项目中碰到这样一个问题,在iframe中中的一个页面,现在要改变这个页面的一个div 的高度,相应的也要改变这个iframe的高度要不显示不全。 解决方案:` *//获取页面div 的高度并加10* var heightDiv=documengt....
  • 本人小白,现在做一个小的Web项目,使用的是ExtJs,但是页面的显示样式和布局有问题,页面中的内容显示不全,也不能随着浏览器窗口大小而改变显示内容。 求大神告知。下面是页面!![图片说明]...
  • 开发的过程中一直都是用的火狐浏览器,基本上没什么问题,但是测试的时候用IE8就出现了页面显示不全的情况。用的是iframe标签来引进pdf页面,页面在IE浏览器上面显示一部分,所以就想到了用js设置页面的高度和宽度...
  • 服务器已部署SSL,站开启了https协议访问了,为什么浏览器仍然提示安全?...2、为了让浏览器完全显示https安全锁,那么需要我们在部署https协议后,对整站进行清理,包括静态页面的http路径、javascript静态资...
  • 普通网站使用iframe是单页面跳转方式,这种方式对搜索引擎更友好,页面最上面有include的一个通知区域,显示用户的通知、待办等,这种网站上如果用websocket实现消息推送,我看连接是用js写的,每次页面刷新或...

空空如也

空空如也

1 2 3 4
收藏数 79
精华内容 31
关键字:

iframe页面显示不全