在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 相关文章推荐
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
基于jquery中children()与find()的区别介绍
Apr 26 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
vue组件之间通信方式实例总结【8种方式】
Feb 22 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 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下使用以下代码连接并测试
2008/04/09 PHP
PHP合并两个数组的两种方式的异同
2012/09/14 PHP
PHP编程函数安全篇
2013/01/08 PHP
javascript radio 联动效果
2009/03/04 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
详解javascript new的运行机制
2016/01/26 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
pyside写ui界面入门示例
2014/01/22 Python
python如何将图片转换为字符图片
2020/08/19 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
Django实现基于类的分页功能
2019/10/31 Python
深入了解Python enumerate和zip
2020/07/16 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
python 逆向爬虫正确调用 JAR 加密逻辑
2021/01/12 Python
意大利体育用品和运动服网上商店:Maxi Sport
2019/09/14 全球购物
幼儿园教师辞职信
2014/01/18 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
先进基层党组织事迹材料
2014/12/25 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
中学语文教学反思
2016/02/16 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
详解Laravel服务容器的优势
2021/05/29 PHP
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
关于Redis的主从复制及哨兵问题
2022/06/16 Redis
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers