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)
複製代碼
```