thymeleaf中使用iframe嵌套页面后 js下拉列表失效

最新推荐文章于 2022-08-07 18:52:00 发布
最新推荐文章于 2022-08-07 18:52:00 发布
阅读量1.5k 收藏
点赞数
分类专栏： springboot java 文章标签： thymeleaf springboot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43171019/article/details/86700285
版权

环境：springboot 使用的thymeleaf模板
问题：把页面的公共部分折分出来后，用iframe嵌套页面后，原本可以使用的下拉列表竟然失效了，单独访问公共页面一切功能正常
解决办法：查看一下抽取公共代码时是否一同把js css 等文件一并抽取出来了,我就是不小心把js css等一起抽取到了公共代码页面,然后嵌套时，使用 th:replace就会引入多次js css相关文件，造成相关功能失效，只需删除重复引入的link便可正常使用了

>
阿松哥哥2018
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Thymeleaf3模板嵌套的使用
想不出好名字的博客
10-22 5508
Thymeleaf3 中，支持了新的表达式~{ },这个表达式是专门用于处理片段（fragment）的，同时也可以用于选择当前文件内容中的片段（fragment）,并且支持模板引入时一起调用，增加了很大的模板灵活性。 官方样例 官方文档中的样例如下： This allows us to create our fragments in a way such that they can be enr...
在 thymeleaf网页中，js获取model中的数组列表.txt
10-10
在thymeleaf网页中，js获取后台model传递过来的对象很重要，这对减少数据库表操作代码的工作量，以及使前台开发更具灵活行怎么强调也不过分。获取model传过来的简单变量很简单，但是获取它传过来的对象不容易。 本例...
Thymeleaf th:replace、th:insert、th:include的使用及区别
smile radiantly
02-18 3061
在项目开发中像侧边栏,导航栏,底部栏,分页等公共模块一般都会单独提取出来成一个页面,再使用.在Thymeleaf中一般采用 th:replace 或 th:insert . th:insert ：保留自己的主标签，保留th:fragment的主标签。 th:replace ：不要自己的主标签，保留th:fragment的主标签。 th:include ：保留自己的主标签，不要th:frag...
解决thymeleaf layout布局不生效
weixin_33805557的博客
09-15 795
今天使用thymeleaf layout布局时总是不生效，特此把解决问题的步骤和几个关键点记录下来备忘。 一、检查依赖 1.thymeleaf必备maven依赖： <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf</art...
Thymeleaf使用iframe标签
qq_31169429的博客
08-27 6099
使用Thymeleaf用iframe标签时src属性找不到对应的文件。可以通过写一个controller，返回需要的页面。 类似` @RequestMapping("/listcontent") public ModelAndView firstpage() { return new ModelAndView("listcontent"); } 之后在html中的iframe src属性...
页面嵌套iframe的时候引发的js交互问题
weixin_30301449的博客
01-05 810
今天在做一个新页面的时候，用到了iframe这个东西。结果出现了一个有趣的问题。自己写的页面和iframe里边的页面属性和js有冲突。具体的点说就是层级出现了问题。不能正常显示。不管怎么修改，总是解决了这个，那个就不行了。最后发现了解决问题，那就是修改document.domain。。。 实现跨域交互的方式有很多，其中这种跨子域的交互，最简单方式就是通过设置document.domain：只需要...
spring boot使用thymeleaf跳转页面实例代码
08-30
这篇教程将深入讲解如何在Spring Boot应用中使用Thymeleaf进行页面跳转。 首先，让我们了解Thymeleaf的基本概念。Thymeleaf是一个基于XML、HTML的模板引擎，它能够处理服务器端的动态数据，并将其插入到HTML页面中...
thymeleaf实现th:each双重多重嵌套功能
10-15
在本示例中，我们将探讨如何使用Thymeleaf的`th:each`指令来实现HTML模板中的双重或多重嵌套循环，以便动态加载一二级文章分类。Thymeleaf是一个强大的服务器端模板引擎，常用于Spring Boot项目，用于生成动态HTML...
springboot中thymeleaf模板使用详解
08-30
SpringBoot 中 Thymeleaf 模板使用详解 Thymeleaf 是新一代的模板引擎，在 Spring4.0 中推荐使用 Thymeleaf 来做前端模板引擎。Thymeleaf 有三个极吸引人的特点：支持 HTML 原型，开箱即用的特性和提供 Spring 标准...
thymeleaf的使用
02-24
本文来自于微信，本文主要介绍了thymeleaf究竟是什么,spring为什么推荐用它,希望对您能有所帮助。thymeleaf是一种Java模板引擎，那何为模板引擎呢？模板引擎就是为了使用户页面和业务数据相互分离而出现的，将从后台...
iframe 的使用
12-30
iframe 的使用
SpringBoot中使用Thymeleaf的常用功能代码
07-09
SpringBoot中使用Thymeleaf的常用功能代码,SpringBoot中使用Thymeleaf的常用功能代码
springboot如何使用thymeleaf模板访问html页面
08-27
springboot中推荐使用thymeleaf模板，使用html作为页面展示。那么如何通过Controller来访问来访问html页面呢？下面通过本文给大家详细介绍，感兴趣的朋友跟随脚本之家小编一起看看吧
下拉框无法收回的解决方法：focus-outside使用方式
xiao1215fei的专栏
04-01 1494
在开发过程中遇到过这样一种情况，当select下拉面板展开后，此时如果点击iframe或富文本编辑器的输入框，select的下拉面板没有收回，这是因为在iframe或富文本编辑器的点击没有触发select下拉面板的outside点击事件，所以需要通过focus-outside插件来解决。官方npm网站：https://github.com/txs1992/focus-outside/blob/master/docs/zh-cn.md#readme 安装：npm install focus-outside
element-ui中点击iframe下拉框不收起
coderMozart的博客
12-15 1443
项目场景： 在页面中存在多个下拉框选项和iframe,当点击有下拉框存在时，点击iframe区域不收起，点击iframe意外区域会收取 问题案例： 案例链接 点击页面中的下拉框组件，再点击红色iframe区域，下拉框不收起，点击红色以外的区域，下拉框收起。 @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DAT
关于Thymyleaf中下拉菜单几点需要注意的问题
shenxiaomo1688的博客
02-24 1079
先来看源码： <li> <p>分类名称：</p> <select name="className" class="form-control m-b" th:with="type=${@dict.getType('sys_zyjn_class')}"> <option value="" th:selected="true">全部...
前端开发时使用iframe标签的时候发生两次请求问题的解决方法
陈先生的博客
01-14 9438
使用iframe可以加载其他页面的元素,比较方便,但是在实际运用中, 在某些浏览器中或发生某种行为时会出现加载两次或多次请求的问题,导致资源浪费. 正常使用时如下方这种情况: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
Thymeleaf语法嵌套解决方法
曦煜墨白的博客
08-07 797
Description：在写页面时常常会遇见thymeleaf语法中嵌套其他的thymeleaf，这时常见的处理方法有两种。
thymeleaf 中下拉列表
最新发布
05-04
在 Thymeleaf 中创建下拉列表可以通过以下步骤实现： 1. 在 HTML 页面的表单中添加一个 select 元素。 2. 使用 Thymeleaf 的 th:each 属性迭代列表中的选项。 3. 使用 th:value 属性设置每个选项的值。 4. 使用 th:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿松哥哥2018

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值