跳转到 GAS 中的元素 html

Question

我使用 Google Apps 脚本创建了一个简单的 Html 文件，并将其部署为 Web 应用程序。虽然我在同一页面的某些元素上添加了link，但它并没有跳转到指定的元素和returns空白页面。

这是 html 的片段。

<ul>
<li><a href ="#april">April</a></li>
<li><a href ="#may">May</a></li>
<li><a href ="#june">June</a></li>
</ul>
        .
        .
        .    
<a id="april">2019/04</a>
        .
        .
        .
<a id="may">2019/05</a>
        .
        .
        .
<a id="june">2019/06</a>
        .
        .
        .

当我点击元素时，它会像这样重定向到另一个 URL。

https://{scriptid}-script.googleusercontent.com/userCodeAppPanel#id

我尝试访问 {url}+{#id}，它给了我相同的页面。所以 id 属性似乎不起作用，但我不知道要修复什么。我在这里做错了什么？

编辑到目前为止，这是我尝试过的。 https://script.google.com/macros/s/AKfycbyW5FRfQP3CpOU0brJEeeSgR6xypQ57jAjDs5KfQFYRmYIaaBs/exec

gs 文件

function doGet() {
   return HtmlService.createTemplateFromFile('index').evaluate();
}

html 文件

<!DOCTYPE html>
<html>
<head>
<base target="_top">
    1
    <br>
    2
    <br>
    3
    <br>
    4
    <br>
    5
    <br>
    <a name="top">Top</a>
</head>  
<body>
<br><br><br><br><br>
    <a href="#top">Goto Top(blank page)</a>
<br>
    <a href="https://script.google.com/macros/s/AKfycbyW5FRfQP3CpOU0brJEeeSgR6xypQ57jAjDs5KfQFYRmYIaaBs/exec#top">Goto Top(just reload)</a>      
</body>
</html>

Answer 1

以下功能在 Google apps 脚本网络应用程序中对我来说工作正常。尝试将 base 设置为 _self 或留空：

<!DOCTYPE html>
<html lang="en">
  <head>
<base />
<meta charset="UTF-8" />
<title>#top Demo</title>
  </head>
  <body>
<div>
  <ul id="navigation">
    <li>
      <a href="#bottom">Click here to go to the bottom</a>
      Lorum ipsum1
    </li>
    <li>
      <a href="#middle">Click here to go to the middle</a>
      Lorum ipsum2
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum3
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum4
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum5
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum6
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum7
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum8
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum9
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum10
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum11
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum12
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum13
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum14
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum15
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum16
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum17
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum18
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum19
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum20
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum21
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum22
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum23
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum24
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum25
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum26
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum27
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum28
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum29
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum30
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum31
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum32
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum33
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum34
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum35
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum36
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum37
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum38
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum39
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum40
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum41
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum42
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum43
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum44
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum45
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum46
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum47
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum48
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum49
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum50
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum51
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum52
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum53
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum54
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum55
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum56
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum57
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum58
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum59
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum60
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum61
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum62
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum63
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum64
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum65
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum66
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum67
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum68
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum69
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum70
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum71
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum72
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum73
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum74
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum75
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum76
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum77
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum78
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum79
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum80
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum81
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum82
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum83
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum84
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum85
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum86
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum87
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum88
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum89
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum90
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum91
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum92
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum93
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum94
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum95
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum96
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum97
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum98
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum99
    </li>
    <li>
      <a id="middle" href="#top">Click here to go top</a>
      Lorum ipsum100
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum101
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum102
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum103
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum104
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum105
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum106
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum107
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum108
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum109
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum110
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum111
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum112
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum113
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum114
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum115
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum116
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum117
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum118
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum119
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum120
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum121
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum122
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum123
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum124
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum125
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum126
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum127
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum128
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum129
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum130
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum131
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum132
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum133
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum134
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum135
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum136
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum137
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum138
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum139
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum140
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum141
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum142
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum143
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum144
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum145
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum146
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum147
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum148
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum149
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum150
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum151
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum152
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum153
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum154
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum155
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum156
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum157
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum158
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum159
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum160
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum161
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum162
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum163
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum164
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum165
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum166
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum167
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum168
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum169
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum170
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum171
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum172
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum173
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum174
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum175
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum176
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum177
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum178
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum179
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum180
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum181
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum182
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum183
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum184
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum185
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum186
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum187
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum188
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum189
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum190
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum191
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum192
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum193
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum194
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum195
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum196
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum197
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum198
    </li>
    <li>
      <a href="#top">Click here to go top</a>
      Lorum ipsum199
    </li>
    <li>
    <a id="bottom" href="#top">Click here to go top</a>
      Lorum ipsum200
    </li>
  </ul>
</div>
  </body>
</html>

跳转到 GAS 中的元素 html

Jump to element in GAS html

html

anchor

web-applications

google-apps-script