在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 相关文章推荐
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
BootStrap的table表头固定tbody滚动的实例代码
Aug 24 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
javascript回调函数详解
Feb 06 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
Array.filter中如何正确使用Async
Nov 04 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
微信自定义分享链接信息(标题,图片和内容)实现过程详解
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 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
php绘制圆形的方法
2015/01/24 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
PHP基于ORM方式操作MySQL数据库实例
2017/06/21 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
用javascript实现自定义标签
2007/05/08 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
Python实现二叉堆
2016/02/03 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python基础教程之Filter使用方法
2017/01/17 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Pandas的Apply函数具体使用
2020/07/21 Python
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
音乐教学随笔感言
2014/02/19 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
会计专业求职信
2014/08/10 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
四查四看自我剖析材料
2014/09/19 职场文书
小学元宵节活动总结
2015/02/06 职场文书
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript