在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 相关文章推荐
Exjs 入门篇
Apr 07 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
JS实现的表格行鼠标点击高亮效果代码
Nov 27 Javascript
js获取鼠标位置实例详解
Dec 09 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
详解Vue.js 作用域、slot用法(单个slot、具名slot)
Oct 15 Javascript
浅谈Three.js截图并下载的大坑
Nov 01 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
建立动态的WML站点(二)
2006/10/09 PHP
快速开发一个PHP扩展图文教程
2008/12/12 PHP
通达OA公共代码 php常用检测函数
2011/12/14 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
php二分查找二种实现示例
2014/03/12 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
微信小程序模板和模块化用法实例分析
2017/11/28 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python保存网页图片到本地的方法
2018/07/24 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
python和php哪个容易学
2020/06/19 Python
keras输出预测值和真实值方式
2020/06/27 Python
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
促销活动方案模板
2014/02/24 职场文书
学雷锋演讲稿
2014/03/04 职场文书
大学新生军训方案
2014/05/03 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
大学生国庆节65周年演讲稿范文
2014/09/25 职场文书
学校食堂标语
2014/10/06 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js