前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >import引入页面的js效果无法使用解决!

import引入页面的js效果无法使用解决!

作者头像
十月梦想
发布2018-08-29 11:40:14
5.8K0
发布2018-08-29 11:40:14
举报
文章被收录于专栏:十月梦想十月梦想
import使用link引入引发问题

谷歌浏览器可以正常使用,但是在谷歌吧浏览器之外使用link的import引入的页面就无法显示

那么这个问题该如何解决呢?

首先引入肯定在jq实现了load(需要加载的文档地方),此时在这个js文件下方进行需要请求的js代码使用$.getScripr('需要加载模板运行的js')

第一步工作这一已经结束了,第二部呢,需要将这个加载的js引入到需要加载的页面使用JavaScript引入,

此时有个先后顺序,这个时候由于第一步时候的js是根据jquery写的,因此在引入第一步时的脚本文件前,先引入一个jquery!

此时在谷歌,火狐,IE(9级以上)包含win10自带的edge均正常使用!

引入到页面后,进行模块的样式文件导入到页面就完全ok了!

说了这么多肯定不太明白,附上三个步骤的主要核心代码

第一步:引入加载的模块,以及模块依赖的js脚本文件导入

代码语言:javascript
复制
$(function(){
	$('#header').load('index.html nav');
	$('#footer').load('index.html footer');
	$.getScript('bs/js/bootstrap.js')
})

第二步:进行引入页面的头部内容,引入jq在引入第一步的脚本,以及css(css文件没有明确位置,在js之上之下都完全ok的)

代码语言:javascript
复制
		<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才能操作(否则是不显示的)!

代码语言:javascript
复制
	<nav id="header"></nav>

其实关于这个import在使用时候,谷歌浏览器会提示这个即将停止使用,如果单纯引入静态页面使用

代码语言:javascript
复制
<link rel="import" href="需要加载的页面">

优点无需导入模板区域的样式,缺点模板区域的js无法使用!

两种方法根据自己的效果选取,目前关于import的问题完美搞定

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-6-6,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • import使用link引入引发问题
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档