时间戳

首页 > 解决方案 > 为什么我的谷歌网络应用程序在点击警报后会变黑

javascript - 为什么我的谷歌网络应用程序在点击警报后会变黑

问题描述

我正在使用谷歌脚本创建一个 webapp。目前我有一个表格可以按用户的名字和姓氏进行搜索。目前我想要的只是在按下提交时出现警报，然后能够关闭警报并返回我的页面。警报正确显示，但是当我单击确定时，整个网站被空白屏幕取代。

这是我的表单的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>UMBC Physics Key Search - UMBC</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script>
    function clientNameSearch(){
      alert("Hello World")
    }
    </script>

</head>

<body id="home">
    <div class="divForm">
        <form>
            <div class="form-group">
                <label for="exampleInputFirstName">First Name</label>
                <input type="text" class="form-control" id="fName" placeholder="Enter first name">
      </div>
            <div class="form-group">
                <label for="exampleInputLastName">Last Name</label>
                <input type="text" class="form-control" id="lName" placeholder="Enter last name">
      </div>
            <button class="btn btn-primary" onclick="clientNameSearch()">Submit</button>
        </form>
    </div>
</body>

</html>

单击确定后，我页面上的 HTML 将替换为以下内容：

<!doctype html>
<html>

<head>
  <meta name="chromevox" content-script="no">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" nonce="sak7PfejzdBV/GpLppcNoQ">
  <link rel="stylesheet" href="/static/macros/client/css/3668349325-mae_html_css_ltr.css">
  <script type="text/javascript" src="/static/macros/client/js/509262275-warden_bin_i18n_warden.js" nonce="sak7PfejzdBV/GpLppcNoQ"></script>
</head>

<body>
  <iframe id="sandboxFrame"
    allow="accelerometer *; ambient-light-sensor *; autoplay *; camera *; clipboard-read *; clipboard-write *; encrypted-media *; fullscreen *; geolocation *; gyroscope *; magnetometer *; microphone *; midi *; payment *; picture-in-picture *; screen-wake-lock *; speaker *; sync-xhr *; usb *; web-share *; vibrate *; vr *"
    sandbox="allow-downloads allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation">
  </iframe>
  <script type="text/javascript" nonce="sak7PfejzdBV/GpLppcNoQ">
    (function() {
      var el = document.getElementById('sandboxFrame');
      el.onload = function() {
        goog.script.init(
          "\x7b\x22functionNames\x22:\x5b\x22doGet\x22,\x22newPage\x22,\x22getMostRecentRexReport\x22,\x22Audit\x22,\x22nameSearch\x22,\x22keySearch\x22,\x22roomSearch\x22,\x22addKey\x22,\x22getKeyMap\x22\x5d,\x22sandboxMode\x22:\x22IFRAME_SANDBOX\x22,\x22callbackTimeout\x22:1830000,\x22deploymentId\x22:\x22AKfycbz5l7sBeVfIyej2N2sdwr9XPY_ohJeyKfg9UmSCC4eYcmAFSIY82f3m8P8FXOB2ge-H5w\x22,\x22eei\x22:\x22\x22,\x22sandboxHost\x22:\x22https:\/\/n-p55pcvdns4cdjyxioy7uetab5monpm46hbajbha-0lu-script.googleusercontent.com\x22,\x22clientSideProperties\x22:\x7b\x22google.script.sandbox.mode\x22:\x22IFRAME_SANDBOX\x22,\x22google.script.host.origin\x22:\x22https:\/\/docs.google.com\x22\x7d,\x22actionPrefix\x22:\x22\/a\/umbc.edu\/macros\/s\/AKfycbz5l7sBeVfIyej2N2sdwr9XPY_ohJeyKfg9UmSCC4eYcmAFSIY82f3m8P8FXOB2ge-H5w\x22,\x22userHtml\x22:\x22\\u003c!DOCTYPE html\\u003e\\n\\u003chtml lang\\u003d\\\x22en\\\x22\\u003e\\n\\n\\u003chead\\u003e\\n\\t\\u003cmeta charset\\u003d\\\x22UTF-8\\\x22 \/\\u003e\\n\\t\\u003ctitle\\u003eUMBC Physics Key Search - UMBC\\u003c\\\/title\\u003e\\n\\t\\u003clink rel\\u003d\\\x22stylesheet\\\x22 href\\u003d\\\x22https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/css\/bootstrap.min.css\\\x22\\n\\t\\tintegrity\\u003d\\\x22sha384-Gn5384xqQ1aoWXA\\u0026#43;058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW\/dAiS6JXm\\\x22 crossorigin\\u003d\\\x22anonymous\\\x22\\u003e\\n\\t\\u003cscript src\\u003d\\\x22\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.0\/jquery.min.js\\\x22\\u003e\\u003c\\\/script\\u003e\\n\\t\\u003cscript async src\\u003d\\\x22\/\/sites.umbc.edu\/wp-content\/themes\/umbc\/assets\/javascripts\/wordpress.base.min.js?v\\u003d4\\\x22\\u003e\\u003c\\\/script\\u003e\\n\\t\\u003cscript\\u003e\\n\\t\\tfunction changePage(page) \x7b\\n            document.open();\\n            document.write(page);\\n            document.close();\\n        \x7d\\n\\t\\u003c\\\/script\\u003e\\n\\t\\u003cscript\\u003e\\n\\t\\tfunction clientNameSearch() \x7b\\n      var firstName \\u003d document.getElementById(\\\x22fname\\\x22).value;\\n      var lastName \\u003d document.getElementById(\\\x22lname\\\x22).value;\\n      google.script.run.withSuccessHandler(onSuccess).nameSearch(firstName, lastName);\\n    \x7d\\n    function onSuccess(result) \x7b\\n      document.getElementById(\\u0027nameDiv\\u0027).innerHTML \\u003d \\\x22\\u003cdiv id\\u003d\\u0027result\\u0027\\u003e\\\x22 + result + \\\x22\\u003c\\\/div\\u003e\\u003cinput type\\u003d\\u0027submit\\u0027 value\\u003d\\u0027Search\\u0027 onclick\\u003d\\u0027refresh()\\u0027\\u003e\\\x22;\\n    \x7d \\n    function refresh()\x7b\\n      document.getElementById(\\u0027nameDiv\\u0027).innerHTML \\u003d \\\x22\\u003cdiv id\\u003d\\u0027nameDiv\\u0027\\u003e\\\\\\n                         \\u003clabel for\\u003d\\u0027fname\\u0027\\u003eFirst Name\\u003c\\\/label\\u003e\\\\\\n                         \\u003cinput type\\u003d\\u0027text\\u0027 id\\u003d\\u0027fname\\u0027 name\\u003d\\u0027firstname\\u0027\\u003e\\\\\\n                         \\u003clabel for\\u003d\\u0027lname\\u0027\\u003eLast Name\\u003c\\\/label\\u003e\\\\\\n                         \\u003cinput type\\u003d\\u0027text\\u0027 id\\u003d\\u0027lname\\u0027 name\\u003d\\u0027lastname\\u0027 \\u003e\\\\\\n                         \\u003cinput type\\u003d\\u0027submit\\u0027 value\\u003d\\u0027Submit\\u0027 onclick\\u003d\\u0027clientNameSearch()\\u0027\\u003e\\\\\\n                    \\u003c\\\/div\\u003e\\\x22\\n    \x7d\\n\\t\\u003c\\\/script\\u003e\\n\\n\\t\\u003cscript\\u003e\\n\\t\\t$(function () \x7b\\n            $(\\u0027.menu a\x5bhref\\u003d\\\x22#\\\x22\x5d\\u0027).on(\\u0027click\\u0027, function (e) \x7b\\n                e.preventDefault();\\n                return false;\\n            \x7d);\\n        \x7d);\\n\\t\\u003c\\\/script\\u003e\\n\\n\\t\\u003cstyle\\u003e\\n\\t\\tbody \x7b\\n\\t\\t\\tfont-family: \\\x22Lato\\\x22, sans-serif;\\n\\t\\t\x7d\\n\\n\\t\\th1 \x7b\\n\\t\\t\\tpadding: 10px;\\n\\t\\t\\ttext-align: center;\\n\\t\\t\\tfont-family: serif;\\n\\t\\t\x7d\\n\\n\\t\\t.sidenav \x7b\\n\\t\\t\\theight: 100%;\\n\\t\\t\\twidth: 250;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 1;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tleft: 0;\\n\\t\\t\\tbackground-color: #111;\\n\\t\\t\\toverflow-x: hidden;\\n\\t\\t\\ttransition: 0.5s;\\n\\t\\t\\tpadding-top: 120px;\\n\\t\\t\x7d\\n\\n\\t\\t.sidenav \x7b\\n\\t\\t\\tpadding: 8px 8px 8px 32px;\\n\\t\\t\\ttext-decoration: none;\\n\\t\\t\\tfont-size: 25px;\\n\\t\\t\\tcolor: #818181;\\n\\t\\t\\tdisplay: block;\\n\\t\\t\\ttransition: 0.3s;\\n\\t\\t\x7d\\n\\n\\t\\t.sidenav a:hover \x7b\\n\\t\\t\\tcolor: #f1f1f1;\\n\\t\\t\x7d\\n\\n\\t\\t.sidenav .closebtn \x7b\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tright: 25px;\\n\\t\\t\\tfont-size: 36px;\\n\\t\\t\\tmargin-left: 50px;\\n\\t\\t\x7d\\n\\n\\t\\t.topBar \x7b\\n\\t\\t\\tbackground-color: #fdb515;\\n\\t\\t\\theight: 100px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 0px;\\n\\t\\t\x7d\\n\\n\\t\\t.divForm \x7b\\n\\t\\t\\talign-items: center;\\n\\t\\t\\twidth: 500px;\\n\\t\\t\\theight: 500px;\\n\\t\\t\\tmargin: 100px 0 0 400px;\\n\\t\\t\x7d\\n\\t\\u003c\\\/style\\u003e\\n\\u003c\\\/head\\u003e\\n\\n\\u003cbody id\\u003d\\\x22home\\\x22\\u003e\\n\\n\\t\\u003cdiv id\\u003d\\\x22container\\\x22\\u003e\\n\\t\\t\\u003cheader id\\u003d\\\x22umbc-header\\\x22\\u003e\\n\\n\\t\\t\\t\\u003c\\\/svg\\u003e\\u003cspan\\u003eUMBC: An Honors University in Maryland\\u003c\\\/span\\u003e\\u003c\\\/a\\u003e\\n\\t\\u003c\\\/div\\u003e\\n\\n\\t\\u003c\\\/header\\u003e\\n\\n\\t\\u003cdiv class\\u003d\\\x22topBar\\\x22\\u003e\\n\\t\\t\\u003ch1\\u003eUMBC Physics Key Search\\u003c\\\/h1\\u003e\\n\\t\\u003c\\\/div\\u003e\\n\\n\\t\\u003cdiv id\\u003d\\\x22mySidenav\\\x22 class\\u003d\\\x22sidenav\\\x22\\u003e\\n    \\u003cbr\/\\u003e\\n    \\u003cbr\/\\u003e\\n    \\u003cbr\/\\u003e\\n\\t\\t\\u003cul class\\u003d\\\x22sub-menu\\\x22\\u003e\\n\\t\\t\\t\\u003cli\\u003e\\n\\t\\t\\t\\t\\u003ca aria-current\\u003d\\\x22page\\\x22\\u003eSearch By Name\\u003c\\\/a\\u003e\\u003c\\\/li\\u003e\\n\\t\\t\\t\\u003cli onclick\\u003d\\\x22google.script.run.withSuccessHandler(changePage).newPage(\\u0027KeyNumber\\u0027)\\\x22\\u003e\\n\\t\\t\\t\\t\\u003ca\\u003eSearch By Key Number\\u003c\\\/a\\u003e\\u003c\\\/li\\u003e\\n\\t\\t\\t\\u003cli onclick\\u003d\\\x22google.script.run.withSuccessHandler(changePage).newPage(\\u0027RoomNumber\\u0027)\\\x22\\u003e\\n\\t\\t\\t\\t\\u003ca\\u003eSearch By Room Number\\u003c\\\/a\\u003e\\u003c\\\/li\\u003e\\n\\t\\t\\t\\u003cli onclick\\u003d\\\x22google.script.run.withSuccessHandler(changePage).newPage(\\u0027Inventory\\u0027)\\\x22\\u003e\\n\\t\\t\\t\\t\\u003ca\\u003eOpen Inventory\\u003c\\\/a\\u003e\\u003c\\\/li\\u003e\\n\\t\\t\\t\\u003cli onclick\\u003d\\\x22google.script.run.withSuccessHandler(changePage).newPage(\\u0027AddKey\\u0027)\\\x22\\u003e\\n\\t\\t\\t\\t\\u003ca\\u003eAdd Keys\\u003c\\\/a\\u003e\\u003c\\\/li\\u003e\\n\\t\\t\\u003c\\\/ul\\u003e\\n\\t\\u003c\\\/div\\u003e\\n\\n\\t\\u003cdiv class\\u003d\\\x22divForm\\\x22\\u003e\\n\\t\\t\\u003cform\\u003e\\n\\t\\t\\t\\u003cdiv class\\u003d\\\x22form-group\\\x22\\u003e\\n\\t\\t\\t\\t\\u003clabel for\\u003d\\\x22exampleInputFirstName\\\x22\\u003eFirst Name\\u003c\\\/label\\u003e\\n\\t\\t\\t\\t\\u003cinput type\\u003d\\\x22text\\\x22 class\\u003d\\\x22form-control\\\x22 id\\u003d\\\x22fName\\\x22 placeholder\\u003d\\\x22Enter first name\\\x22\\u003e\\n      \\u003c\\\/div\\u003e\\n\\t\\t\\t\\u003cdiv class\\u003d\\\x22form-group\\\x22\\u003e\\n\\t\\t\\t\\t\\u003clabel for\\u003d\\\x22exampleInputLastName\\\x22\\u003eLast Name\\u003c\\\/label\\u003e\\n\\t\\t\\t\\t\\u003cinput type\\u003d\\\x22text\\\x22 class\\u003d\\\x22form-control\\\x22 id\\u003d\\\x22lName\\\x22 placeholder\\u003d\\\x22Enter last name\\\x22\\u003e\\n      \\u003c\\\/div\\u003e\\n\\t\\t\\t\\u003cbutton type\\u003d\\\x22submit\\\x22 class\\u003d\\\x22btn btn-primary\\\x22 onclick\\u003d\\\x22clientNameSearch()\\\x22\\u003eSubmit\\u003c\\\/button\\u003e\\n\\t\\t\\u003c\\\/form\\u003e\\n\\t\\u003c\\\/div\\u003e\\n\\n\\n\\t\\u003c\\\/div\\u003e \\n\\t\\u003cfooter role\\u003d\\\x22contentinfo\\\x22 id\\u003d\\\x22umbc-footer\\\x22\\u003e\\n\\t\\t\\u003cdiv id\\u003d\\\x22umbc-footer-logo\\\x22\\u003e\\u003ca href\\u003d\\\x22https:\/\/umbc.edu\\\x22 title\\u003d\\\x22UMBC: An Honors University in Maryland\\\x22\\u003e\\u003csvg\\n\\t\\t\\t\\t\\tid\\u003d\\\x22UMBC-Footer-Logo\\\x22 data-name\\u003d\\\x22UMBC-Footer-Logo\\\x22 xmlns\\u003d\\\x22http:\/\/www.w3.org\/2000\/svg\\\x22\\n\\t\\t\\t\\t\\tviewBox\\u003d\\\x220 0 521 137\\\x22\\u003e\\n\\t\\t\\t\\t\\t\\u003ctitle\\u003eUMBC\\u003c\\\/title\\u003e\\n\\n\\t\\t\\t\\t\\u003c\\\/svg\\u003e\\u003cspan\\u003eUMBC: An Honors University in Maryland\\u003c\\\/span\\u003e\\u003c\\\/a\\u003e\\u003c\\\/div\\u003e\\n\\n\\t\\t\\u003cdiv id\\u003d\\\x22umbc-footer-info\\\x22\\u003e\\u0026copy; University of Maryland, Baltimore County \\u003cspan class\\u003d\\\x22bullet\\\x22\\u003e\\u0026bull;\\u003c\\\/span\\u003e\\n\\t\\t\\t1000 Hilltop Circle \\u003cspan class\\u003d\\\x22bullet\\\x22\\u003e\\u0026bull;\\u003c\\\/span\\u003e Baltimore, MD 21250\\u003c\\\/div\\u003e\\n\\t\\u003c\\\/footer\\u003e\\n\\t\\u003cscript type\\u003d\\u0027text\/javascript\\u0027 src\\u003d\\u0027https:\/\/styleguide.umbc.edu\/wp-includes\/js\/wp-embed.min.js?ver\\u003d5.3.2\\u0027\\u003e\\u003c\\\/script\\u003e\\n\\n\\u003c\\\/body\\u003e\\n\\n\\u003c\\\/html\\u003e\x22,\x22ncc\x22:\x22\x7b\\\x22awhs\\\x22:true\x7d\x22\x7d",
          "AJuLMu2XrggITuNYVUnfq3ny8Gy925_zAg:1616428813815", undefined, false, true, "true", "https:\/\/n-p55pcvdns4cdjyxioy7uetab5monpm46hbajbha-0lu-script.googleusercontent.com");
      }
      el.src = 'https:\/\/n-p55pcvdns4cdjyxioy7uetab5monpm46hbajbha-0lu-script.googleusercontent.com\/userCodeAppPanel';
    }());
  </script>
</body>

</html>

这只会显示一个空白屏幕。这与谷歌表格显示警报的方式有关吗？我从来没有遇到过标准 HTML 的这个问题。

我还尝试从函数中删除所有代码，因此它没有任何功能，当我按下空白屏幕的按钮时，我得到了相同的结果。

标签： javascripthtmlgoogle-apps-script

解决方案

我发现我的代码有问题。我不得不将按钮放在表单之外，如下所示：

<div class="divForm">
    <form>
        <div class="form-group">
            <label for="exampleInputFirstName">First Name</label>
            <input type="text" class="form-control" id="fName" placeholder="Enter first name">
        </div>
        <div class="form-group">
            <label for="exampleInputLastName">Last Name</label>
            <input type="text" class="form-control" id="lName" placeholder="Enter last name">
        </div>
    </form>
    <button class="btn btn-primary" onclick="clientNameSearch()">Submit</button>
</div>

推荐阅读