在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 相关文章推荐
JavaScript 字符串连接性能优化
Dec 20 Javascript
JQuery从头学起第一讲
Jul 04 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
理解javascript异步编程
Jan 27 Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
JS实现拖动滚动条评分的效果代码分享
Sep 29 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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设计模式 Template (模板模式)
2011/06/26 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
2013/12/12 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
详解Python中的文本处理
2015/04/11 Python
Python 描述符(Descriptor)入门
2016/11/20 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
浅谈flask源码之请求过程
2018/07/26 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
读取nii或nii.gz文件中的信息即输出图像操作
2020/07/01 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
满月酒答谢词
2014/01/14 职场文书
幼教简历自我评价
2014/01/28 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
公司年会搞笑主持词
2014/03/24 职场文书
李强感恩观后感
2015/06/17 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
道士塔读书笔记
2015/06/30 职场文书
三下乡活动心得体会
2016/01/23 职场文书
简历中的自我评价应该这样写!
2019/07/12 职场文书
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL
js 实现验证码输入框示例详解
2022/09/23 Javascript