关于一个页面中引入另一个页面 bootstrap引用Js失效的坑

最新推荐文章于 2024-02-26 16:51:43 发布
原创 最新推荐文章于 2024-02-26 16:51:43 发布 · 4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

只需要在父页面中引入所有的js文件

子页面中不需要引入重复的js文件

否则会莫名其妙的错误 也没有报错！以此记下踩了5个小时的坑


如果是弹窗的话 照目前编码状况来看 两个页面没有相互影响

Bootstrap02之主页搭建，增加界面
m0_64043477的博客
05-06 567
Bootstrap01.主页的搭建和增加页面的搭建
Thymeleaf+bootstrap 实现tab页，引入不同的html
weixin_41581877的博客
12-01 1168
近期给同事写一个计算器功能，想用bootstrap的tab标签页功能，但是有7个tab页，都写到一个html太乱了，最后结合Thymeleaf的th:replace 实现了该功能。th:replace用法：airBottleCalcu/tab1 html的路径，tab-1 是代码快。Thymeleaf 不能直接跳转html，用这个替换代码还是很好使的。
大众点评字体_大众点评（最新字体反爬）
weixin_39637203的博客
12-21 369
“”仅限学术交流，如有冒犯请联系作者删除“”查看页面看到它的字体都是一些小框框这就是所谓的字体反爬这个时候我们如果用爬虫去爬的话爬下来的都是一些  这样的怪字符(此处可以直接打开页面源码直接看到)这个和以前的反爬就不同了一般像这种字体反爬我遇见过的有的是只需做一些简单的替换，还有的就是内部包含了字体文件(.woff,.ttf)等，一般在控制台点击Font然后刷新页面就会出现字体文件很显然内部有...
bootstrap如何引入
enthan809882的博客
10-26 4733
在页面的标签中加入如下代码即可： <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAky...
Bootstrap引入和使用
AZURE060606的博客
02-26 2899
Bootstrap是一个开源的前端框架，用于对HTML和CSS代码进行封装，因此可以直接在标签中加入现成的属性来实现需求v3官方文档库：官方书写好了大量现成的CSS样式以及组件。
html页面引入2个不同版本jquery-xxx.js文件
qq_41502024的博客
04-28 3112
1.问题引入 jquery版本众多，在使用jquery做项目时，由于各种原因，需要同时在一个html文件引入两个 甚至多个不同版本jquery-xxx.js文件。这篇文章记录我遇到问题，解决问题过程。 2.问题背景 我所做的web项目（以下简称项目），使用wamp环境（apache2.4.35，php5.6.38，mysql5.7.23）， 在某个html文件中引...
SpringBoot页面跳转访问css、js等静态资源引用无效解决.docx
06-03
在SpringBoot应用中，开发人员经常遇到一个常见问题，即在尝试访问页面时，CSS、JavaScript等静态资源引用失效。这通常是因为SpringBoot的默认资源配置导致的。在本篇文章中，我们将深入探讨这个问题的原因以及解决...
BootStrap 页签切换失效的解决方法
12-08
解决这个问题的方法是仔细检查最后一个能正常切换的页签（在示例中是“页签2”），确保其内部没有多余的`</div>`标签。如果存在，删除这个多余的结束标签，使HTML结构恢复正确。正确的HTML结构应该如下所示： ```...
关于Bootstrap弹出框无法调用问题的解决办法
11-23
这是一个标准的引入顺序，确保jQuery在Bootstrap之前加载。然而，当出现问题时，有可能是因为在实际项目中，这个顺序被错误地颠倒了，导致Bootstrap尝试使用未加载的jQuery，从而引发错误。 在Firefox的开发者工具...
Bootstrap中表单控件状态(验证状态)
09-01
需要注意的是，为了实现这些效果，Bootstrap的CSS和JavaScript库需要正确引入到页面中。同时，根据实际需求，开发者可能还需要自定义JavaScript代码来进行表单验证逻辑，以便在用户输入时动态改变表单控件的状态。 ...
使用bootstrap框架-引入使用
qq_43077362的博客
03-21 1865
【前端框架】bootstrap框架： 这是一款开源免费的前端框架，能够帮助我们很快速的搭建一个页面，优化代码，符号w3c标准，并且兼容IE6及以下浏览器。 为什么要使用框架：会少消耗点带宽 一、Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的...
bootstrap页面模板引入到公共页面得提取
jj__1234567的博客
05-05 485
2.找到其中的一个页面如table.html,把页面粘贴到templates下面我的是改了名字，因为要作为公共页面，所以取名common.html。把下载下来的模板文件夹中的css和js赋值上去如图所示。1.找到一个模板，bootstrap的模板有很多，我找的是Gentelella模板。5.创建html页面模板，把每次要创建的的内容做成一个模板，这样很方便。
Bootstrap在老旧站点升级中面对多版本jQuery如何应用
weixin_43263355的博客
12-04 940
概要 本文通过意在和大家分享一个运营了15年的老旧站点，升级为流行的Bootstrap风格的解决方案。来说明如何让bootstrap运行在各种版本的jQuery环境中。 旧站点现状 当前站点为运行在IIS 下的ASP.NET站点，重要页面50个，常用页面300个，总共约1000个页面。这些页面服务于销售部的2000多名销售人员。该站点历经15年大大小小无数项目的建设。 前端JS插件： 插件情况极其复杂，有来自jQuery-ui库的标准插件，有来自第三方的插件，有的插件第三方已经不再维护，有基于jQuer
在HTML网页中引入Bootstrap前端框架
热门推荐
lzssing-GG的博客
02-15 3万+
Bootstrap百度百科介绍：       Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由
Bootstrap模态框remote用法的一个坑
weixin_39536750的博客
04-25 2336
modal_save.modal({ backdrop: 'static', keyboard: 'false', remote : toChooseBankBillUrl });若使用以上写法，务必保证模态框中跳转的页面中引用的js不与原页面重复（由于这种写法依然是共用一个页面，模态框中的页面与主页面js可以共用），否则会导则bootstrap部分插件不可用。...
html中引入调用另一个html的方法
weixin_30667301的博客
02-24 3266
html中引入调用另一个html的方法，尝试了好几种，都列出来： 其中第一种是最好的，其他的方法，可以尝试看看，是不是适合你当前项目 一、div+$(“#page1”).load(“b.html”) 参考代码： <body> <div id="page1"></div> <div id="page2"><...
引入bootstrap导致布局混乱
qq_37260235的博客
10-21 4376
项目网页copy模板，使用后发现引入bootstrap导致页面布局变小了等问题，查找后发现，引入样式的顺序应该是： 应该将bootstrap首先引入，然后再在下面编写css或者是引入其他css文件。 &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="js/bootstrap.min.js"&gt;&lt;/s...
bootstrap modal 弹出其他页面
weixin_30375247的博客
09-10 2093
此文是可以的，是复制的然后粘贴 1、不使用js 方式 1.1 按钮 <a class=" btn default" href="ui_modals_ajax_sample.html" data-target="#ajax" data-toggle="modal"> View Demo &l...
“添加CDN引用”，添加到什么文件里，现在有几个html文件，一个css文件，一个js文件
最新发布
03-25
<think>好的，我需要帮用户解决如何在项目中正确添加CDN引用到HTML、CSS和JS文件的问题。首先，我得回顾一下用户提供的引用内容，看看有没有相关的信息可以利用。 用户提到了引用[3]和[5]，里面提到了使用CDN的方法，比如在HTML中用link标签引入CSS，用script标签引入JS。这可能就是关键点。另外，用户还提到多个文件的情况，所以需要考虑如何在多个HTML文件中统一管理这些CDN引用，避免重复和遗漏。 接下来，我应该整理最佳实践的步骤。首先，确定需要哪些CDN资源，比如Bootstrap、jQuery等。然后，在HTML的head部分添加CSS的CDN链接，通常在<head>里用<link>标签。对于JS，可能放在<body>末尾，用<script>标签，这样不影响页面加载速度。 然后，用户可能有多个HTML文件，比如头部和尾部公共部分，这时候可以考虑使用模板引擎或者服务端包含来复用代码，避免每个文件都手动添加。不过如果项目简单，可能需要手动在每个HTML文件中添加。同时，外部CSS和JS文件应该避免使用CDN，除非是特定情况，比如字体库。 还要注意版本控制和HTTPS，确保CDN链接使用合适的协议，并且指定版本号，避免更新导致的问题。另外，回退方案也很重要，万一CDN不可用，可以从本地加载资源。 用户可能的问题包括如何组织多个文件的引用，如何处理更新，以及如何测试是否生效。所以需要给出检查方法和注意事项，比如用浏览器开发者工具查看网络请求，或者使用在线工具测试CDN的可用性。 最后，生成相关问题，帮助用户进一步了解CDN的使用和优化，比如版本管理、性能影响、安全措施等。</think>### 如何在项目中正确添加CDN引用 #### 一、CDN引用的基础规则 1. **HTML文件中添加CDN** - **CSS文件**：在`<head>`标签内通过`<link>`标签引入，例如： ```html <link rel="stylesheet" href="https://cdn.example.com/style.css"> ``` 参考引用[3]和[5]，这是最常见的引入方式[^3][^5]。 - **JS文件**：在`<body>`末尾（或`<head>`中结合`async/defer`属性）通过`<script>`标签引入，例如： ```html <script src="https://cdn.example.com/library.js"></script> ``` 2. **多文件统一管理** - 若项目有多个HTML文件（如`index.html`、`about.html`），需在每个文件的对应位置重复添加CDN引用。 - 建议将公共部分（如头部、尾部）提取为模板文件（如`header.html`），通过模板引擎（如Jinja2）或服务端包含（SSI）实现复用[^4]。 #### 二、最佳实践步骤 1. **确定依赖项** - 明确需要引用的库（如Bootstrap、jQuery），选择官方或可靠CDN服务（如jsDelivr、cdnjs）。 2. **HTML文件添加示例** ```html <!DOCTYPE html> <html> <head> <!-- CSS CDN --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"> </head> <body> <!-- 页面内容 --> <!-- JS CDN --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html> ``` 3. **CSS/JS文件中引用CDN的例外情况** - **外部CSS文件**：一般无需在CSS中直接引用CDN，除非需要字体库（如Google Fonts）： ```css @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); ``` - **JS模块化开发**：通过`import`语句动态加载CDN资源（需配置模块类型）： ```javascript import { library } from 'https://cdn.skypack.dev/module'; ``` #### 三、关键注意事项 1. **版本控制** - 始终指定库的版本号，避免因CDN更新导致兼容性问题，例如： ```html <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.min.js"></script> ``` 2. **HTTPS协议** - 强制使用`https://`前缀，防止混合内容错误（Mixed Content）： ```html <!-- 正确 --> <link href="https://cdn.example.com/style.css"> <!-- 错误 --> <link href="http://cdn.example.com/style.css"> ``` 3. **回退方案** - 添加本地资源作为CDN失效的备用方案，例如： ```html <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> <script> if (!window.jQuery) { document.write('<script src="/local/jquery.min.js"><\/script>'); } </script> ``` #### 四、验证与调试 1. **检查网络请求** - 通过浏览器开发者工具（F12 → Network标签）确认CDN资源是否加载成功。 2. **CDN可用性测试** - 使用工具如`curl`或在线服务（如https://downforeveryoneorjustme.com）检测CDN域名状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值