import引入页面的js效果无法使用解决!
时间:2022-06-08
本文章向大家介绍import引入页面的js效果无法使用解决!,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
import使用link引入引发问题
谷歌浏览器可以正常使用,但是在谷歌吧浏览器之外使用link的import引入的页面就无法显示
那么这个问题该如何解决呢?
首先引入肯定在jq实现了load(需要加载的文档地方),此时在这个js文件下方进行需要请求的js代码使用$.getScripr('需要加载模板运行的js')
第一步工作这一已经结束了,第二部呢,需要将这个加载的js引入到需要加载的页面使用JavaScript引入,
此时有个先后顺序,这个时候由于第一步时候的js是根据jquery写的,因此在引入第一步时的脚本文件前,先引入一个jquery!
此时在谷歌,火狐,IE(9级以上)包含win10自带的edge均正常使用!
引入到页面后,进行模块的样式文件导入到页面就完全ok了!
说了这么多肯定不太明白,附上三个步骤的主要核心代码
第一步:引入加载的模块,以及模块依赖的js脚本文件导入
$(function(){
$('#header').load('index.html nav');
$('#footer').load('index.html footer');
$.getScript('bs/js/bootstrap.js')
})
第二步:进行引入页面的头部内容,引入jq在引入第一步的脚本,以及css(css文件没有明确位置,在js之上之下都完全ok的)
<meta charset="UTF-8">
<link rel="stylesheet" href="bs/css/bootstrap.css" />
<link rel="stylesheet" href="css/index.css" />
<script src="jquery-1.11.3.js"></script>
<script src="js/test2.js"></script>
第三步:在第一部的js文件请求index.html页面的nav部分代码加载在本页的#header内,所以本页要先写#header这个DOM,jquery才能操作(否则是不显示的)!
<nav id="header"></nav>
其实关于这个import在使用时候,谷歌浏览器会提示这个即将停止使用,如果单纯引入静态页面使用
<link rel="import" href="需要加载的页面">
优点无需导入模板区域的样式,缺点模板区域的js无法使用!
两种方法根据自己的效果选取,目前关于import的问题完美搞定
- 利用placeholder属性来添加输入框默认文字提示,提高用户体验
- Linux系统监控、诊断工具之top命令详解
- 【Dev Club分享】iOS黑客技术大揭秘
- Linux终端:用cat命令查看不可见字符
- golang 函数定义及其接口实例
- 分享两种圣诞节雪花特效JS代码(网站下雪效果)
- React 移动 web 极致优化
- golang 高效字符串拼接
- Linux+Nginx/Apache/Tomcat新增SSL证书,开启https访问教程
- golang 使用时间通过md5生成token
- golang中对map操作类
- Nginx在线服务状态下平滑升级或新增模块的详细操作记录
- 【Dev Club分享】微信读书iOS性能优化
- [svn: E155004]svn update报database is locked错误的解决办法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android Studio 安装APK在虚拟机时报 Installation failed due to: 'null' 解决
- 在Android Studio中使用Kotlin
- Day21.Python项目案例
- Day18.python文件/目录
- Kotlin学习日志(六)控件使用
- Android 天气APP(一)开发准备
- Android 天气APP(二)获取定位信息
- Android 天气APP(三)访问天气API与数据请求
- Android 天气APP(四)搭建MVP框架与使用
- Android 天气APP(五)天气预报、生活指数的数据请求与渲染
- Android 天气APP(六)旋转风车显示风力、风向
- Android 天气APP(七)城市切换 之 城市数据源
- Elasticsearch: Reindex接口
- Android Studio 更新版本之后报错: Cannot access android.arch.lifecycle.ViewModelStoreOwner
- Android各版本查询和开启悬浮窗权限