<a href="#">で画面遷移してしまう。

前提・実現したいこと

GASでWebアプリを製作しています。
機能として、モーダルウィンドウの実装を考えています。

発生している問題・エラーメッセージ

html
1<a href = "#comments"></a>

上記のように、a hrefに＃を用いてページ内のidに：targetを付けて操作したいのですが、GAS上ではなぜか以下のURLのようにページが遷移されてしまいます。
https://script.google.com/macros/s/[ID]/dev
↓
https://n-[ID]-0lu-script.googleusercontent.com/userCodeAppPanel#comments

該当のソースコード

コード.gs

gs
1function doGet() {
2  return htmlOutput = HtmlService.createTemplateFromFile("index")
3    .evaluate()
4    .setTitle("Modal Window")
5    .addMetaTag("viewport", "width=device-width,initial-scale=1");
6}

index.html

html
1<!DOCTYPE html>
2<html>
3
4<head>
5	<base target="_top">
6	<meta charset='utf-8'>
7	<meta name='viewport' content='user-scalable=no,width=device-width, initial-scale=1'>
8	<title>stopwatch</title>
9	<?!= HtmlService.createHtmlOutputFromFile('css.html').getContent(); ?>
10	<?!= HtmlService.createHtmlOutputFromFile('javascript.html').getContent(); ?>
11</head>
12
13<body>
14	<a href="#comments">Show Comments</a>
15
16	<section id="comments">
17		<h3>Comments</h3>
18		<!-- Comments here... -->
19		<a href=" # ">Hide Comments</a>
20	</section>
21
22</html>

css.html

css
1<style>
2
3#comments:not(:target) {
4    display: none;
5}
6#comments:target {
7    display: block;
8}
9</style>

javascript.html

javascript
1<script>
2  "use strict";  
3</script>

試したこと

GAS上ではなく、エディタでhtml実行したときは正常に動作しました。

参考URL
https://coliss.com/articles/build-websites/operation/css/target-pseudo-class-trick.html

よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

こうしたらどうでしょうか？

html
1<a href="#comments" onclick="return false;">Show Comments</a>

もしaタグに直接書きたくなければこんな感じでも良いかと思います。

html
1<a href="#comments" id="comments_anchor">Show Comments</a>

javascript
1<script>
2"use strict";  
3
4window.addEventListener('load', () => {
5  document.getElementById('comments_anchor').addEventListener('click', (e) => {
6    e.cancelBubble = true;
7  });
8});
9</script>

投稿2021/10/25 02:46

gtakat

総合スコア206

shunsaku2004

2021/10/26 13:11

gtakatさんご回答ありがとうございます。頂いた方法で試して見たのですが、同じ結果になってしまいました、、お手数おかけしてしまい恐縮ですが、他の方法はありますでしょうか？

gtakat

2021/10/26 13:43

すいません、実際に試してみましたが、手元だと return false; の方に効いている用に見えるのですが、eventListenerだと確かに画面遷移しちゃいました。もうちょっと他にないか調べてみましたが、HTMLの <base target="_top"> を <base target="_self"> にしてみたらどうでしょうか？

shunsaku2004

2021/11/14 11:16

gtakatさん返信遅れてしまい申し訳ありません。 _selfに変更することで無事解決することができました！！ありがとうございます！

行動規範の内容に同意します

そもそも、GASのウェブアプリケーションはiframeのsandbox内なので、そもそも仕様でアンカーを使ったアクションは出来ません。

jQueryを使ったアクションで代用することになります。

JavaScript
1$('a[href*=#]').click(function() {
2    var target = $(this.hash);
3    if (target) {
4        var jumpman = target.offset().top;
5        $('html,body').animate({scrollTop: jumpman},600,"easeInOutQuart");
6        return false;
7    }
8});