在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 相关文章推荐
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
语义化 H1 标签
Jan 14 Javascript
javascript string字符串优化问题
Jul 31 Javascript
firebug的一个有趣现象介绍
Nov 30 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
解决iview打包时UglifyJs报错的问题
Mar 07 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 Javascript
VUE项目实现主题切换的多种方法
Nov 26 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生成便于打印的网页
2006/10/09 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
jQuery实现自动切换播放的经典滑动门效果
2015/09/12 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
2019/12/09 Javascript
Python入门篇之面向对象
2014/10/20 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
详解Python中where()函数的用法
2018/03/27 Python
python 实现交换两个列表元素的位置示例
2019/06/26 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
高山背包:High Sierra
2017/11/23 全球购物
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
迎八一活动主题
2014/01/31 职场文书
小组口号大全
2014/06/09 职场文书
影视广告专业求职信
2014/09/02 职场文书
2014年政风行风自查自纠报告
2014/10/21 职场文书
家属联谊会致辞
2015/07/31 职场文书
反邪教教育心得体会
2016/01/15 职场文书