在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 相关文章推荐
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
jQuery中:password选择器用法实例
Jan 03 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
解析javascript中鼠标滚轮事件
May 26 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
javascript history对象详解
Feb 09 Javascript
详解Angular2组件之间如何通信
Jun 22 Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 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调用mysql存储过程
2007/02/14 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
js 3种归并操作的实例代码
2013/10/30 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
2017/09/14 Javascript
玩转vue的slot内容分发
2018/09/22 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
详解微信UnionID作用
2019/05/15 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
RC4文件加密的python实现方法
2015/06/30 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
详解爬虫被封的问题
2019/04/23 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
Python3如何使用tabulate打印数据
2020/09/25 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
HTML5新增元素如何兼容旧浏览器有哪些方法
2014/05/09 HTML / CSS
物流专业毕业生推荐信范文
2013/11/18 职场文书
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
八年级数学教学反思
2014/01/31 职场文书
文明之星事迹材料
2014/05/09 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
2014年个人委托书范本
2014/10/13 职场文书
酒会邀请函
2015/01/31 职场文书
2015年保管员工作总结
2015/04/30 职场文书
2015年调度员工作总结
2015/04/30 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android
Navicat Premium自定义 sql 标签的创建方式
2022/09/23 数据库