在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 10 Javascript
js 模拟气泡屏保效果代码
Jul 10 Javascript
js getBoundingClientRect() 来获取页面元素的位置
Nov 25 Javascript
将查询条件的input、select清空
Jan 14 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 Javascript
详解微信小程序动画Animation执行过程
Sep 23 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中常量,变量的作用域和生存周期
2013/08/10 PHP
php5.3 不支持 session_register() 此函数已启用的解决方法
2013/11/12 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
javascript事件模型介绍
2016/05/31 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
2017/02/14 Javascript
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
js脚本编写简单刷票投票系统
2017/06/27 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
js对象属性名驼峰式转下划线的实例代码
2020/09/17 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
python处理中文编码和判断编码示例
2014/02/26 Python
详解python基础之while循环及if判断
2017/08/24 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
Python实现微信小程序支付功能
2019/07/25 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
旧时光糖果:Old Time Candy
2018/02/05 全球购物
数组越界问题
2015/10/21 面试题
安全员岗位职责
2013/11/11 职场文书
党课学习思想汇报
2014/01/02 职场文书
2015年检验科工作总结
2015/04/27 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
教师继续教育反思周记
2015/06/25 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书