Layui实现页面内部的iframe跳转
时间: 2023-12-25 14:41:40 浏览: 324
要在页面内部使用 iframe 进行跳转,可以使用 Layui 提供的 `element.tabAdd` 和 `element.tabChange` 方法来实现。
首先,在 HTML 中定义一个包含 iframe 的容器,例如:
```html
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<iframe src="page1.html" frameborder="0" class="layui-tab-content-item"></iframe>
</div>
</div>
```
然后,在 JavaScript 中使用 `element.tabAdd` 方法添加新的选项卡,并使用 `element.tabChange` 方法切换到对应的选项卡,实现 iframe 的跳转。例如:
```javascript
layui.use('element', function(){
var element = layui.element;
// 添加新的选项卡
element.tabAdd('demo', {
title: '页面2',
content: '<iframe src="page2.html" frameborder="0" class="layui-tab-content-item"></iframe>',
id: 2 // 需要指定一个唯一的 id
});
// 切换到对应的选项卡
element.tabChange('demo', 2); // 切换到页面2
});
```
注意,`element.tabAdd` 方法需要传入一个唯一的 id,用于标识选项卡,而 `element.tabChange` 方法则可以传入选项卡的 id 或标题(title)来切换。
以上就是使用 Layui 实现页面内部的 iframe 跳转的基本步骤。你可以根据实际需求进行调整和扩展。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rar](https://img-home.csdnimg.cn/images/20241231044955.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://img-home.csdnimg.cn/images/20241231044930.png)