js 引入外部文件之 script 标签
在我的理解看来，html 就是一个单纯的管显示问题，js就是单纯的管动作问题，css就是单纯的管布局问题，这三个构成了一个网页
在HTML中，经常会用到引入js 文件。
引入js的方法很简单：
1. 1 就是加入一个script 标签，引入一个源文件为test.txt 的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./test.txt"></script>
<script>
alert( a );
</script>
</head>
<body> </body>
</html>
在上面 test.txt 的内容为： var a = 100;
运行结果：
1.2 引入的源文件内容是一个函数，也是可以的；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function fn( data ){
alert( data );
}
</script>
<script>
window.onload = () => {
var oBtn = document.querySelector("input");
oBtn.onclick = () => {
var oScript = document.createElement("script");
oScript.src = "./test2.txt";
document.body.appendChild( oScript );
}
}
</script>
</head>
<body>
<input type="button" value="点击添加 script 标签">
</body>
</html>
点击动态添加：script 标签，script的src属性为test2.txt
test2.txt的内容为：
fn( 100 );
fn('nihao!');
fn("这个是动态调用的script标签！");
调用三次fn()函数
运行结果：弹出三次调用的结果
从上面看出，script标签可以动态调用外部文件
2. XMLHttpRequest 调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function(){
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
var xhr = new XMLHttpRequest();
var url = 'https://api.douban.com/v2/book/27027055';
xhr.onreadystatechange = function(){
if( xhr.readyState == 4 && xhr.status == 200 ){
alert( xhr.responseText );
}
}
xhr.open("GET", url, true);
xhr.send(null);
}
}
</script>
</head>
<body>
<input type="button" value="获取书籍信息" id="btn">
</body>
</html>
结果报错：
2.2 换一种方式调用：加 script 标签，在标签中调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
list-style-type: none;
}
</style>
<script>
function show(data) {
//创建一个p元素
var oP = document.createElement("p");
//给创建的p元素添加内容，内容为data对象的title属性
oP.innerHTML = data.title;
//创建一个img对象
var oImg = new Image();
//给img对象获取图片地址
oImg.src = data.image;
// 在body元素内添加p节点
document.body.appendChild( oP );
// 在body元素内添加img节点
document.body.appendChild( oImg );
var oLi = document.createElement("li");
oLi.innerHTML = data.catalog;
document.body.appendChild( oLi );
}
</script>
<script>
window.onload = function () {
var oBtn = document.getElementById("btn");
oBtn.onclick = function () {
// 相当于在这里执行了一个show()函数的调用
var oScript = document.createElement("script");
oScript.src = "https://api.douban.com/v2/book/27027055?callback=show";
document.body.appendChild(oScript);
}
}
</script>
</head>
<body>
<input type="button" value="获取图书" id="btn">
</body>
</html>
源文件地址：https://api.douban.com/v2/book/27027055?callback=show 返回一个 json 数据
声明一个函数 show,参数是一个data对象，然后动态创建一个script标签，在script标签中调用 show
运行结果：
小结：使用script 标签，可以跨域调用数据
上面点击获取图书，就可以调用 https://api.douban.com/v2/book/27027055?callback=show 中的数据
调用的文件和被调用的文件不在同一个地址的现象，叫做跨域访问，说明 script 标签可以进行跨域访问
同源的文件叫同域，不同源的叫跨域，归纳如下：
js 引入外部文件之 script 标签的更多相关文章
- jquery，js引入css文件，js引入头尾
jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...
- vue3+typescript引入外部文件
vue3+typescript中引入外部文件有几种方法 (eg:引入echarts) 第一种方法: 1 indext.html中用script引入 <div id="app" ...
- 引入外部文件的时候为什么省略http:
[摘要]相信很多时候大家在使用网上的实例代码的时候,需要引入外部文件,然而它们通常都是省略了http:,这是为什么呢? 先给大家看一个简单的小例子,引入外部jquery文件: <script s ...
- nginx 引入外部文件
http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $ ...
- vue2.0 在main.js引入scss文件报错
在vue2.0的main.js中引入scss文件报错 原因是在 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.scss$/, loade ...
- postman通过引入外部文件实现参数化
postman可通过引入外部文件进行参数化 目录 1.准备好接口信息 2.设置 1.准备好接口信息 这里的usr和psw是要参数化的对象 2.设置 文件准备 添加文件,并设置好循环次数即可
- vue项目 安装和配置sass & main.js引入scss文件报错
通过npm 安装 cnpm install --save-dev sass-loader cnpm install --save-dev node-sass 在build文件夹下的webpack.ba ...
- 【html】【2】html引入外部文件js css
1>引入js 我们只是写了简单必须的html标签,从未给标签添加点击事件,这次页面添加事件. >写入html页面,可以在<head>标签内 也可以在<body>标 ...
- HTML引入外部文件，解决统一管理导航栏问题。
1.IFrame引入,看看下面的代码 <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 ...
随机推荐
- Mysql 5.7 系列命令 timestamp类型的字段不能设默认值为“0000-00-00 00:00:00” 要设为`update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新',
一.show相关命令语句 1.查看表的索引 show index from tbl_name; 1 table:表名 non_unique:索引是非唯一的?.0否,唯一是索引的.1是,是非唯一索引.( ...
- 结对编程——paperOne基于java的四则运算 功能改进
项目成员:张金生 张政 由于新的需求,原本使用JSP的实现方式目前改为Java实现,即去除了B/S端. 需求分析: 1.四则运算要满足整数运算.分数运算两种: 2.运算题目随机,并且可以打印题 ...
- 2012 - AD 验证域控是否成功部署
1,验证AD DS域服务:AD DS & AD WS 2,验证“默认容器”及“Domain Controller” 3,验证“Default-First-Site-Name" 4,验 ...
- c#类 对象 构造函数 析构函数——面向对象
类: 也是复杂数据类型 也是需要我们先定义出类型,才能使用它的数据 对象: 是通过模板类实例化出来的个体,具有具体的属性和行为(方法),对象是不能索引到静态方法. 对象的生命周期 构造—— 使用—— ...
- vue属性
1. 图片地址: data:{ url:"https://www.baidu.com/img/bd_logo1.png"}, <img v-bind:src="ur ...
- 第9课 基于范围的for循环
1. 基于范围的for循环(range-based for) (1)语法:for(decl : coll){//statement} ①decl用于声明元素及类型,如int elem或auto ele ...
- Unity读取Android SDcard文件
一.添加权限 权限添加 :Player settings -- Other settings -- write permission的设置 Sdcard.这个是在Unity编辑器里打包的情况. 如果导 ...
- CS229 6.18 CNN 的反向传导算法
本文主要内容是 CNN 的 BP 算法,看此文章前请保证对CNN有初步认识. 网络表示 CNN相对于传统的全连接DNN来说增加了卷积层与池化层,典型的卷积神经网络中(比如LeNet-5 ),开始几层都 ...
- python2.7中不同类型之间的比大小
可以看到,字符串为空的时候也比数字类型大,这是因为python2.7中按照如下规则进行比较: 1.任何两个对象都可以比较. 2.相同类型的对象(实例),如果是数字型(int/float/long/co ...
- isNAN的使用方法及介绍
NaN为 Not a Number isNaN()函数在接到一个值后,会尝试将这个值转换为数值. alert(isNaN(NaN)); //true alert(isNaN(25)); //false ...