這個問題是從 Web Applications Stack Exchange
我哪里出錯了？為什么我不能將 HTML 加載到檔案中？
uj5u.com熱心網友回復：
我試圖復制您的代碼并發現了一些問題：
loadForm.html和的檔案擴展名不正確loadAddSupermarket.html，檔案包含 Apps 腳本方法，您應該改用.gs檔案擴展名- 您的 HTML 檔案中有不必要的匯入。
nav-baraction 不需要 Popper.js，它需要 JQuery 并且 JQuery 沒有匯入到您的 HTML 中，這會導致其他選項卡不可點擊。 - 在您的
loadAddSupermarket.gs檔案中，addSupermarket 與您的檔案串列中的任何檔案都不匹配。Apps 腳本在檔案名方面區分大小寫。重命名你addsupermarket.html的addSupermarket.html - 在
htmlServ.evaluate.getContent();ofloadPartialHTML_(partial)函式中。evaluate這將產生錯誤，因為腳本在 HtmlTemplate 中找不到屬性。我想你錯過了在()它旁邊添加。 - 下面的專案以
<li>開頭<div>但以 結尾</a>。你應該改用。
在這里，我重構了您的代碼，并且能夠為“添加超市”選項卡獲得正確的輸出。
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<ul >
<li ><a data-toggle="tab" href="#search" id="search-link">Search</a></li>
<li ><a data-toggle="tab" href="#addsupermarket" id="add-supermarket-link">Add Supermarket</a></li>
</ul>
<div >
<div id="search" ></div>
<div id="addsupermarket" ></div>
</div>
<script>
function loadAddSupermarketView() {
google.script.run.withSuccessHandler(function(html) {
document.getElementById("addsupermarket").innerHTML = html;
}).loadAddSupermarketView();
}
document.getElementById("add-supermarket-link").addEventListener("click", loadAddSupermarketView);
</script>
</body>
</html>
addSupermarket.html
<h1>Add Supermarket</h1>
加載表格.gs
function loadMainForm() {
const htmlServ = HtmlService.createTemplateFromFile("main");
const html = htmlServ.evaluate();
const ui = SpreadsheetApp.getUi();
html.setWidth(850).setHeight(600);
ui.showModalDialog(html, "Add Supermarket");
}
function createMenu() {
SpreadsheetApp.getUi().createMenu("Utilities")
.addItem("Add new Supermarket", "loadMainForm")
.addToUi();
}
function onOpen() {
createMenu();
}
加載AddSupermarket.gs
function loadPartialHTML_(partial) {
const htmlServ = HtmlService.createTemplateFromFile(partial);
return htmlServ.evaluate().getContent();
}
function loadAddSupermarketView() {
return loadPartialHTML_("addSupermarket");
}
輸出：
參考：
- Bootstrap - 需要 Javascript 的組件
- HTMLTemplate.evaluate()
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/431141.html