在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 相关文章推荐
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
JS获取今天是本月第几周、本月共几周、本月有多少天、是今年的第几周、是今年的第几天的示例代码
Dec 05 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
PHP截取指定图片大小的方法
2014/12/10 PHP
PHP引用返回用法示例
2016/05/28 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
几种响应式文字详解
2017/05/19 Javascript
js 获取html5的data属性实现方法
2017/07/28 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
jQuery实现的点击图片居中放大缩小功能示例
2019/01/16 jQuery
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
python根据经纬度计算距离示例
2014/02/16 Python
Python中bisect的用法
2014/09/23 Python
Python3基于sax解析xml操作示例
2018/05/22 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
PYTHON绘制雷达图代码实例
2019/10/15 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
高中三年学习生活的自我评价
2013/10/10 职场文书
音乐系毕业生自荐信
2013/10/27 职场文书
老同学聚会感言
2014/02/23 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
公司内部升职自荐信
2015/03/27 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python