SoFunction
Updated on 2025-04-08

How to load external html pages in layui tab control

At present, there are three main ways to sneak into external web pages:

iframe method

<div><iframe src=""></iframe>

ajax way

<div id=“externalHtml"></div>

After ajax loads the data, just assign it directly.

script script method

<div><script src="" type="text/javascript"></script></div>

Example of the first method

&lt;div class="layui-tab" lay-filter="demo" lay-data="{ height:332}"&gt;
  &lt;ul class="layui-tab-title"&gt;
    &lt;li class="layui-this"&gt;hao123&lt;/li&gt;
    &lt;li&gt;Baidu&lt;/li&gt;
    &lt;li&gt;layuiofbutton&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="layui-tab-content"&gt;
    &lt;div class="layui-tab-item layui-show"&gt;
      &lt;iframe src="http://"&gt;&lt;/iframe&gt;
    &lt;/div&gt;
    &lt;div class="layui-tab-item" &gt;
      &lt;iframe src=""&gt;&lt;/iframe&gt;
    &lt;/div&gt;
    &lt;div class="layui-tab-item"&gt;
      &lt;button class="layui-btn layui-btn-normal"&gt;All-match buttons&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

The above method to load external html pages in the layui tab control is all the content I share with you. I hope you can give you a reference and I hope you support me more.