在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中遭遇级联表达式陷阱
Mar 08 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
javascript中new关键字详解
Dec 14 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 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使用cookie保存登录用户名的方法
2015/01/26 PHP
总结PHP删除字符串最后一个字符的三种方法
2016/08/30 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
React Native悬浮按钮组件的示例代码
2018/04/05 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
Vue + Element UI图片上传控件使用详解
2019/08/20 Javascript
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
Django使用unittest模块进行单元测试过程解析
2019/08/02 Python
python 实现目录复制的三种小结
2019/12/04 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
详解HTML5新增标签
2017/11/27 HTML / CSS
瑞典时尚耳机品牌:Urbanears
2017/07/26 全球购物
新员工欢迎词
2014/01/12 职场文书
校庆筹备方案
2014/03/30 职场文书
租赁意向书范本
2014/04/01 职场文书
暑期培训心得体会
2014/09/02 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
Python中re模块的元字符使用小结
2022/04/07 Python
错误码NET::ERR_CERT_DATE_INVALID证书已过期解决方法?
2022/07/07 数码科技