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的问题完美搞定