专栏首页十月梦想import引入页面的js效果无法使用解决!

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一天带你入门到放弃vue.js(一)

    每个新的框架入手都会进行一些列的扯犊子!这里不多说那么多!简简单单说一下vue吧!

    十月梦想
  • js三种引用方式

    2.行内使用方式,在标签内声明一下,比如a标记herf内嵌套JavaScript:

    十月梦想
  • node.js环境安装

    nodejs作为一个轻量级的服务端环境语言,提供了大大的便捷,这里提供一下nodejis环境的搭建以及第一个nodejs程序!

    十月梦想
  • shiro教程5(整合SSM项目-认证)

    注意shiro的配置可以添加在spring的配置文件中。但是为了便于管理我们再单独创建一个shiro的配置文件,里面的Schema还是spring的。

    用户4919348
  • 开发文档 web.xml基本配置

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    多凡
  • 使用create-react-app简化前端项目的建立

    jeremyxu
  • shiro教程5(整合SSM项目-认证)

    注意shiro的配置可以添加在spring的配置文件中。但是为了便于管理我们再单独创建一个shiro的配置文件,里面的Schema还是spring的。

    Java帮帮
  • 『互联网架构』软件架构-解密电商系统-秒杀消息队列异步下单(79)

    PS:BAT这种大公司里面的秒杀系统,一般涉及到7,8个中心,每个中心之前可能有2个开发人员,一个秒杀系统大概15,16个人员,在加上单元测试人员,功能测试人员...

    IT故事会
  • 动手使用ABAP Channel开发一些小工具,提升日常工作效率

    以及用今天要谈到的ABAP Channel技术开发的乒乓球游戏,还能支持双打,囧。

    Jerry Wang
  • Mac上ADB的使用

    adb bugreport : 打印dumpsys、dumpstate、logcat的输出,也是用于分析错误

    剑行者

扫码关注云+社区

领取腾讯云代金券