Uncaught SyntaxError: Unexpected token <反思

綠箭字益達發表於2018-04-04
Error

起源

今天qa小妹妹拿著電腦來問我，說自己的後端測試頁面控制檯上報錯了Uncaught SyntaxError: Unexpected token <這個錯誤，一臉賣萌的讓我解決一下。作為一名光榮的玩js程式碼的小菜鳥，這個時候不展現自己的有點，還等什麼時候？ 刷刷刷的定位，發現是丟擲的異常在jquery.toggle.buttons.html檔案中，而且錯誤在

<!DOCTYPE html>
複製程式碼

這一行。

Uncaught SyntaxError: Unexpected token <反思

前戲

登上她的伺服器，第一反應多了個>符號或者哪個標籤沒閉合吧。果斷排除法，把伺服器上的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>
複製程式碼

專案目錄結構如下：

Uncaught SyntaxError: Unexpected token <反思

效果：

Uncaught SyntaxError: Unexpected token <反思

  • 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)
複製程式碼

相關文章