在我的理解看来，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 标签的更多相关文章

  1. jquery，js引入css文件，js引入头尾

    jquery,js引入css文件,js引入头尾 今天在项目中,需要把20多个页面加上头和尾部,头和尾是我写的,所以小师傅把这个工作交给我了. 我开始往里面加,先引入common.css,在body开始 ...

  2. vue3+typescript引入外部文件

    vue3+typescript中引入外部文件有几种方法 (eg:引入echarts) 第一种方法: 1 indext.html中用script引入 <div id="app" ...

  3. 引入外部文件的时候为什么省略http:

    [摘要]相信很多时候大家在使用网上的实例代码的时候,需要引入外部文件,然而它们通常都是省略了http:,这是为什么呢? 先给大家看一个简单的小例子,引入外部jquery文件: <script s ...

  4. nginx 引入外部文件

    http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $ ...

  5. vue2.0 在main.js引入scss文件报错

    在vue2.0的main.js中引入scss文件报错 原因是在 在build文件夹下的webpack.base.conf.js的rules里面添加配置 { test: /\.scss$/, loade ...

  6. postman通过引入外部文件实现参数化

    postman可通过引入外部文件进行参数化 目录 1.准备好接口信息 2.设置 1.准备好接口信息 这里的usr和psw是要参数化的对象 2.设置 文件准备 添加文件,并设置好循环次数即可

  7. vue项目 安装和配置sass & main.js引入scss文件报错

    通过npm 安装 cnpm install --save-dev sass-loader cnpm install --save-dev node-sass 在build文件夹下的webpack.ba ...

  8. 【html】【2】html引入外部文件js css

    1>引入js 我们只是写了简单必须的html标签,从未给标签添加点击事件,这次页面添加事件. >写入html页面,可以在<head>标签内  也可以在<body>标 ...

  9. HTML引入外部文件，解决统一管理导航栏问题。

    1.IFrame引入,看看下面的代码     <IFRAME NAME="content_frame" width=100% height=30 marginwidth=0 ...

随机推荐

  1. 修改ECSHOP的小数点保留位数

    客户站点http://carfa.hk79.2ifree.com 原来的程序直接取整了,现在做下面修改. 首先打开文件 /carfa/web/includes/lib_common.php 第一步:在 ...

  2. [UE4]Return Node节点好用法

    蓝图自定义函数中,碰到“Return Node”也会推出当前的函数,跟高级语言的“return”是一样的用法

  3. Unable to load the plugin type

    crm 2016 post update 异步执行 1 我们自定义文件是发布在GAC的,所以先注册GAC 2 更新注册插件 3 重启IIS ,异步服务

  4. 第11章 拾遗5：IPv6和IPv4共存技术（2）_ISATAP隧道技术

    6.3 ISATAP隧道技术 (1)基本概念 ①在一个IPv4网络中主机与路由器之间创建一条ISATAP隧道,以便让该主机可以访问IPv6网络中的资源. ②条件:IPv4中的PC主机需要支持IPv4和 ...

  5. DB通用类：SQL Server 通用类库

    SQLServer通用类A using System; using System.Data; using System.Data.SqlClient; using System.Collections ...

  6. Session establishment complete on server 2181, sessionid = 0x35fb853eb6f0004

    描述:windows调试 hbase 代码时,出现如下错误:Session establishment complete on server 2181, sessionid = 0x35fb853eb ...

  7. cocos子节点转父节点坐标 原理浅析（局部坐标转世界坐标同理）

    在CCNode的类中,有一个得到 一个节点坐标系转换父亲坐标系的一个矩阵,节点内坐标乘以这个矩阵,就可以转换为在节点父节点中的坐标,方法名为: Mat4& Node::getNodeToPar ...

  8. build.gradle 中compileSdkVersion,minSdkVersion,targetSdkVersion,buildToolsVersion的意思

    compileSdkVersion: 编译版本:compileSdkVersion告诉gradle使用哪个版本AndroidSDK编译你的应用: minSdkVersion: 最低SDK版本:他代表的 ...

  9. 浅析Redis 和MongoDB

    今天来聊聊什么事nosql,一听nosql也许很多人会觉得很高大上的感觉,但其实接触过了也还觉得还行,随着当今数据的疯狂爆炸性的增长,传统的RDBMS也越来越暴露出他的不足之处,所以,作为一名合格的程 ...

  10. 初级安全入门——XSS注入的原理与利用

    XSS的简单介绍 跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets,CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS.恶意攻击者 ...