链接到Google应用程序脚本中的另一个HTML页面_Html_Google Apps Script_Web Applications

链接到Google应用程序脚本中的另一个HTML页面

html google-apps-script web-applications

链接到Google应用程序脚本中的另一个HTML页面,html,google-apps-script,web-applications,Html,Google Apps Script,Web Applications,从ScriptDbConsole.html链接到legend.html时，我收到以下错误消息：很抱歉，您请求的文件不存在。请检查一下电话号码地址，然后重试这通常会在正常的环境下工作，但我想在这里不会。它在script.google.com上当在script.google.com项目中创建一个新的.html文件时，它会在与其他项目相同的位置创建它，所以这段代码应该可以正常工作？如何从ScriptDbConsole.html打开legend.html <a href='legend.h

从ScriptDbConsole.html链接到legend.html时，我收到以下错误消息：

很抱歉，您请求的文件不存在。请检查一下电话号码地址，然后重试

这通常会在正常的环境下工作，但我想在这里不会。它在script.google.com上

当在script.google.com项目中创建一个新的.html文件时，它会在与其他项目相同的位置创建它，所以这段代码应该可以正常工作？如何从ScriptDbConsole.html打开legend.html

<a href='legend.html' target='_blank'>Open in new window</a>

虽然HtmlService允许您提供HTML，但它不是“托管”页面，您无法通过URL直接访问应用程序脚本项目中的各种HTML文件。相反，您的Web应用程序在发布时会有一个URL，这是您仅有的URL

这里有一种方法，可以从脚本中提供单独的页面，并使它们的行为类似于html文件链接

调用

doGet（）

函数时会传递一个事件，我们可以利用该事件来指示需要服务的页面。如果我们的Web应用ID为

，则URL加上请求特定页面的查询字符串如下所示：

https://script.google.com/macros/s/<SCRIPTURL>/dev?page=my1

my1.html


Source=my1.html

my2.html


Source=my2.html

Google apps script web app主要设计用于单页web app应用程序。但它也可以用作多页应用程序（不推荐）。以下是一个示例web应用程序：

代码G.gs：页面1.html

这是第1页
你好，世界

页面2.html

这是第2页
再见，世界

index.html


单页应用程序
h1{
文本对齐：居中；
保证金：2倍；
文本转换：大写；
背景颜色：绿色；
}
跨度：悬停，
a:悬停{
背景颜色：黄绿色；
}
身体{
背景颜色：棕色；
颜色：白色；
字号：2em；
}
a:参观了{
颜色：白色；
}
单页应用程序演示
加载。。。
//更改基本url
google.script.run
.withSuccessHandler（url=>{
$（'base'）.attr（'href'，url）
})
.getUrl（）
//函数来处理散列更改
功能改变（e）{
让hash=e.location.hash
if（！hash）{
main（）
返回
}
google.script.run
.withSuccessHandler（htmlFragment=>{
$（'#main'）.html（htmlFragment）
})
.getHtml（哈希）
}
google.script.history.setChangeHandler（更改）
//用于添加主页html的函数
函数main（）{
$（'#main'）.html(`



`）
}
//从主函数加载主html
//将切换添加到span以更改为多页应用
$(() => {
main（）
$（'#type'）。在（'单击'，（）=>{
设hf=$（'a'）.attr（'href'）
如果（！hf）返回
hf=hf.indexOf（“#”）+1
$（'#type'）。文本（hf？'Multiple'：'Single'）
$（'a'）。每个（（i，el）=>{
$（el.attr（'href'，（i，v）=>
hf？'？页面='+v.slice（1）：'#'+v.slice（6）
)
})
})
})

参考资料：

我几天前也做了同样的操作，结果显示呈现的链接href值为，这当然是错误的。我最终使用了文件夹ID“/legend.html方法并链接到该文件。这对我来说没问题，因为我不需要在链接页面上运行任何代码，只需显示一些信息。这既脏又漂亮。至少它工作正常。我复制并粘贴了您的代码，结果是：拒绝在框架中显示“”，因为它将“X-frame-Options”设置为“sameorigin”。找到了上述错误的解决方案：您应该将其添加到my1.html和my.html中，这样您的my1.html将如下所示：Source=my1.html这可能是一个错误愚蠢的问题。。。在我的html中，我粘贴了。在我的页面上，该部分实际显示，旁边有一个按钮，但它指向一个400错误，因为该部分没有解析。为什么显示而不是调用函数？重要的是：此code.gs仍然需要来自的include函数

/**
 * Get the URL for the Google Apps Script running as a WebApp.
 */
function getScriptUrl() {
 var url = ScriptApp.getService().getUrl();
 return url;
}

/**
 * Get "home page", or a requested page.
 * Expects a 'page' parameter in querystring.
 *
 * @param {event} e Event passed to doGet, with querystring
 * @returns {String/html} Html to be served
 */
function doGet(e) {
  Logger.log( Utilities.jsonStringify(e) );
  if (!e.parameter.page) {
    // When no specific page requested, return "home page"
    return HtmlService.createTemplateFromFile('my1').evaluate();
  }
  // else, use page parameter to pick an html file from the script
  return HtmlService.createTemplateFromFile(e.parameter['page']).evaluate();
}

<html>
  <body>
    <h1>Source = my1.html</h1>
    <?var url = getScriptUrl();?><a href='<?=url?>?page=my2'> <input type='button' name='button' value='my2.html'></a>
  </body>
</html>

<html>
  <body>
    <h1>Source = my2.html</h1>
    <?var url = getScriptUrl();?><a href='<?=url?>?page=my1'> <input type='button' name='button' value='my1.html'></a>
  </body>
</html>

//@return Base Url
function getUrl() {
  return ScriptApp.getService().getUrl()
}
//@return Html page raw content string
function getHtml(hash) {
  return HtmlService.createHtmlOutputFromFile(hash).getContent()
}

//@return provided page in the urlquery '?page=[PAGEID]' or main index page
function doGet(e) {
  var page = e.parameter.page
  return HtmlService.createHtmlOutputFromFile(page || 'index')
    .addMetaTag('viewport', 'width=device-width, initial-scale=1')
    .setTitle('App Demo')
}

<h3>This is Page 1</h3>
<p>Hello World!</p>

<h4>This is Page2</h4>
<p>Goodbye World!</p>

<!DOCTYPE html>
<html>
  <head>
    <base target="_top" />
    <title>Single Page App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
      h1 {
        text-align: center;
        margin: 2px;
        text-transform: uppercase;
        background-color: green;
      }
      span:hover,
      a:hover {
        background-color: yellowgreen;
      }
      body {
        background-color: brown;
        color: white;
        font-size: 2em;
      }
      a:visited {
        color: white;
      }
    </style>
  </head>
  <body>
    <h1><span id="type">Single</span> Page App Demo</h1>
    <div id="main">Loading...</div>
    <script>
      //Change base url
      google.script.run
        .withSuccessHandler(url => {
          $('base').attr('href', url)
        })
        .getUrl()

      //Function to handle hash change
      function change(e) {
        let hash = e.location.hash
        if (!hash) {
          main()
          return
        }
        google.script.run
          .withSuccessHandler(htmlFragment => {
            $('#main').html(htmlFragment)
          })
          .getHtml(hash)
      }
      google.script.history.setChangeHandler(change)

      //Function to add Main page html
      function main() {
        $('#main').html(`
            <ul>
              <li><a href="#page1">Page1</a></li>
              <li><a href="#page2">Page2</a></li>
            </ul>`)
      }

      //Loads Main html from main function
      //Adds toggle to span to change to a Multiple page app
      $(() => {
        main()
        $('#type').on('click', () => {
          let hf = $('a').attr('href')
          if (!hf) return
          hf = hf.indexOf('#') + 1
          $('#type').text(hf ? 'Multiple' : 'Single')
          $('a').each((i, el) => {
            $(el).attr('href', (i, v) =>
              hf ? '?page=' + v.slice(1) : '#' + v.slice(6)
            )
          })
        })
      })
    </script>
  </body>
</html>