Uncaught SyntaxError: Unexpected token <反思

时间 2019-11-16

标签 uncaught syntaxerror unexpected token 反思繁體版

原文原文链接

起源

今天qa小妹妹拿着电脑来问我，说本身的后端测试页面控制台上报错了Uncaught SyntaxError: Unexpected token <这个错误，一脸卖萌的让我解决一下。做为一名光荣的玩js代码的小菜鸟，这个时候不展示本身的有点，还等何时？刷刷刷的定位，发现是抛出的异常在jquery.toggle.buttons.html文件中，并且错误在javascript

<!DOCTYPE html>
复制代码

这一行。php

前戏

登上她的服务器，第一反应多了个>符号或者哪一个标签没闭合吧。果断排除法，把服务器上的jquery.toggle.button.html中的head标签中的内容所有干掉。刷新页面，依然报错。那就必定在body标签中的内容没闭合或者多了什么符号吧。全干掉，通通干掉，留个body标签。刷新页面，报错，强制刷新，依然报错。cmd+r键都按烂了，仍是报错。懵逼中。。。html

小高潮

把qa小妹妹喊来坐在本身边上，从而给本身加一个迅速查bug的buff，而后迅速打开浏览器开始google。逛了stack overflow后，发现前辈遇到相似的问题，下面有人回复，是否是引用路径出问题致使的。java

高潮

在服务器上迅速找到引用jquery.toggle.button.html的地方，一看代码写的以下：jquery

<scrpit src='./XXX/XXX/jquery.toggle.button.html' type='text/javascripnt'/>
复制代码

我楞了一下，感受怪怪的，可是有说不出哪里怪。懵懵懂懂思考了几十秒，说了句，script标签能直接引html文件？？？？讲道理，我还真不知道这方面的知识。script标签只用过拿来引入js文件了。那这种用法对吗？彻底是盲区啊。后端

结束

因为采用的是php框架，迅速帮她新建了一个php文件，而后把文件经过php合入进去，这里不细讲了，和主题无关，纯属公司业务。。。。浏览器

反思

那么html怎么被引入到另外一个html中或者js中呢？js的a标签去跳转，这个咱们能理解，可是但愿这个html是做为一个小拼图嵌在页面上呢？php框架

1.咱们先来理解下script标签：服务器

type属性：type是script标签必须有的属性值，并且值必须是MIME类型。MIME类型：text/javscript(最经常使用)、text/ecmascript、application/ecmascript、application/javascript、text/vbscriptapp

2.若是引入html

load方法。

先加载index.html：

<!DOCTYPE html>
<html>
    <head>
    .
    .
    .
    </head>
    <body>
        <div>this is first html</div>
        <div class='second-html-containr'></div>
        <script src='../js/index.js' /> </body> </html> 复制代码

调用index.js：

var $ = require('jquery');
window.onload=function(){
    let $htmlContainer = $('.second-html-containr');
    $htmlContainer.append($htmlContainer.load('../app/text.html #test'))
}
复制代码

要加载进来的html文件：text.html

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
    </head>
    <body>
        <div id='test'>1111111</div>
    </body>
</html>
复制代码

项目目录结构以下：

效果：

object对象

obect对象加载

<div>this is first html</div>
<!-- <div class='second-html-containr'></div> -->
<object type='text/x-scriptlet' data='./text.html' width="400" height="400" />
<script src='../js/index.js' /> 复制代码

iframe

使用iframe加载

<div>this is first html</div>
<!-- <div class='second-html-containr'></div> -->
<!-- <object type='text/x-scriptlet' data='./text.html' width="400" height="400" /> -->
<iframe width="400" height="400" src="./text.html"></iframe>
<script src='../js/index.js' /> 复制代码

边框样式什么的本身到时候调整

import 方式导入

采用import方法加载

在index.html的head里面加入以下标签：
```
<link rel="import" href="./text.html" id="page1">
复制代码
```
在index.html的body里加一个script标签或者在index.js文件中加入以下代码：
```
console.log(page1.import.body)
复制代码
```