在layui tab控件中载入外部html页面的方法


Posted in Javascript onSeptember 04, 2019

目前,潜入外部网页的方式,主要有3种:

iframe方式

<div><iframe src="xxx.jsp"></iframe>

ajax方式

<div id=“externalHtml"></div>

ajax加载数据后,直接赋予 externalHtml.innerHTML 即可。

script脚本方式

<div><script src="xxx.js" type="text/javascript"></script></div>

第一种方式的示例

<div class="layui-tab" 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 src="http://www.hao123.com"></iframe>
    </div>
    <div class="layui-tab-item" >
      <iframe src="http://www.taobao.com"></iframe>
    </div>
    <div class="layui-tab-item">
      <button class="layui-btn layui-btn-normal">百搭按钮</button>
    </div>
  </div>
</div>

以上这篇在layui tab控件中载入外部html页面的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
Jul 03 Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
vue的webcamjs集成方式
Nov 16 Javascript
JavaScript原型链中函数和对象的理解
Jun 16 Javascript
微信自定义分享链接信息(标题,图片和内容)实现过程详解
Sep 04 #Javascript
微信小程序按钮点击动画效果的实现
Sep 04 #Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 #Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 #Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
Sep 04 #Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 #Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 #Javascript
You might like
php foreach、while性能比较
2009/10/15 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
PHP 实现链式操作
2021/03/09 PHP
js正确获取元素样式详解
2009/08/07 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
2021/01/11 Javascript
Django中使用Celery的方法示例
2018/11/29 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
python GUI模拟实现计算器
2020/06/22 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
汽车维修专业个人求职信范文
2014/01/01 职场文书
新驾驶员个人自我评价
2014/01/03 职场文书
运动会广播稿500字
2014/01/28 职场文书
法学求职信
2014/06/22 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技