Uncaught SyntaxError: Unexpected token <反思

最新推荐文章于 2024-08-21 18:14:08 发布

weixin_34247155

最新推荐文章于 2024-08-21 18:14:08 发布

阅读量340

点赞数

文章标签： php 后端 javascript ViewUI

原文链接：https://juejin.im/post/5ac493bc51882577b45f3cfb

版权

起源

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

<!DOCTYPE html>
复制代码

这一行。

前戏

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

小高潮

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

高潮

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

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

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

结束

由于采用的是php框架，迅速帮她新建了一个php文件，然后把文件通过php合入进去，这里不细讲了，和主题无关，纯属公司业务。。。。

反思

那么html怎么被引入到另一个html中或者js中呢？js的a标签去跳转，这个我们能理解，但是希望这个html是作为一个小拼图嵌在页面上呢？

1.我们先来理解下script标签：

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

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)
复制代码
```