在layui tab控件中載入外部html頁面的方法

更新時間：2019年09月04日 10:55:26 作者：djshichaoren

今天小編就為大家分享一篇在layui tab控件中載入外部html頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

目前，潛入外部網頁的方式，主要有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頁面的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js圖片下載方式集合(附詳細代碼)
關于圖片下載問題,不同的瀏覽器,需要兼容的下載方式,這篇文章主要給大家介紹了關于js圖片下載方式的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-01-01
JavaScript SHA512&SHA256加密算法詳解
本文給大家分享的是javascript版的SHA512&SHA256加密算法的代碼，以及用法，有需要的小伙伴可以參考下。
2015-08-08
JavaScript實現反轉字符串的方法詳解
這篇文章主要介紹了JavaScript實現反轉字符串的方法,結合實例形式分析了字符串反轉操作,并詳細講述了相關函數的功能與使用注意事項,需要的朋友可以參考下
2017-04-04
一文解析ChatGPT?之?Fetch?請求
這篇文章主要為大家介紹了ChatGPT?之?Fetch請求的內容解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-03-03
33種Javascript 表格排序控件收集
收集的33個表格排序空間，需要的朋友可以參考下。自從選擇。
2009-12-12
javascript去掉前后空格的實例
在js中去除空格并不是可以直接使用trim來刪除，它在js中并不像我們想的那么好用，特別像我要刪除前后空格這個trim函數更不可靠了
2013-11-11
Jsonp post 跨域方案
本文給大家講述的是個人在一個項目中遇到的關于jsonp的post跨域問題的解決過程，這里記錄下來，分項給大家。
2015-07-07
Js nodeType 屬性全面解析
本文是對Js nodeType的屬性進行了全面分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11
用ajax實現的自動投票的代碼
用ajax實現的自動投票的代碼...
2007-03-03
js點擊文本框彈出可選擇的checkbox復選框
這篇文章主要介紹了js點擊文本框彈出可選擇的checkbox復選框的相關資料,需要的朋友可以參考下
2016-02-02