在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 01 Javascript
Javascript 日期对象Date扩展方法
May 30 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
jQuery validate 中文API 附validate.js中文api手册
Jul 31 Javascript
根据一段代码浅谈Javascript闭包
Dec 14 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
Jun 20 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
微信小程序中使用 async/await的方法实例分析
May 06 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 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
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
PHP获取和操作配置文件php.ini的几个函数介绍
2013/06/24 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
vue中配置scss全局变量的步骤
2020/12/28 Vue.js
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
美国首屈一指的高品质珠宝设计师和零售商:Allurez
2018/01/23 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
开普敦通行证:Cape Town Pass
2019/07/18 全球购物
内衣营销方案
2014/03/15 职场文书
搞笑创意广告语
2014/03/17 职场文书
新闻传播专业求职信
2014/07/22 职场文书
党员教师个人对照检查材料(群众路线)
2014/09/26 职场文书
防暑降温通知书
2015/04/27 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
家长反馈意见及建议
2015/06/03 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
MySQL 数据类型选择原则
2021/05/27 MySQL
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers
DIY胆机必读:各国电子管评价
2022/04/06 无线电