阅读 18682

Uncaught SyntaxError: Unexpected token <反思

起源

今天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)
    复制代码
关注下面的标签,发现更多相似文章
评论