在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 相关文章推荐
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
JavaScript Split()方法
Dec 18 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
Auto.js自动收取自己和好友蚂蚁森林能量脚本
Jun 28 Javascript
原生javascript实现连连看游戏
Jan 03 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下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
PHP排序算法之简单选择排序(Simple Selection Sort)实例分析
2018/04/20 PHP
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
深入理解jQuery layui分页控件的使用
2016/08/17 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
JS基于正则表达式实现的密码强度验证功能示例
2017/09/21 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
vue的过滤器filter实例详解
2018/09/17 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
python检测某个变量是否有定义的方法
2015/05/20 Python
python实现汉诺塔方法汇总
2016/07/25 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
python中JWT用户认证的实现
2020/05/18 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
向领导表决心的话
2014/03/11 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python