Google Apps 脚本未加载 jquery 移动设备 css

Question

我正在尝试学习将 jquery 移动设备与 Google Apps 脚本结合使用，但我的托管页面似乎没有为其加载 CSS。这段代码应该有一个灰色的页眉和页脚栏，如果我复制并粘贴开发数据页面部分，它应该仍然只显示一次。这些都没有发生。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>Testing</h1>
      </div>
      <div data-role="main" class="ui-content">
        <h1>Hello, World!</h1>
        <p>Welcome to my page</p>
      </div>
      <div data-role="footer">
        <h2>Testing More</h2>
      </div>
    </div>
  </body>
</html>

我缺少什么来完成这项工作？

注意：我也尝试使用 jquery 2.2.4 而不是 3.4.1.. 没有区别...

Answer 1

明白了...它分为两部分：

首先，jquery移动端的托管版本为1.4.5，与jquery3.

仍然不兼容

其次，jquery 必须在 jquery 移动设备之前加载，因此它必须在页面上位于其上方：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">

Answer 2

我认为你应该使用 .ui-header or .ui-footer css 中只有两个实例使用 data-role，它们在 .ui-mobile [data-role=page],.ui-mobile [data-role=dialog],.ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0 } 如果将 .ui-header {background-color:gray } 添加到 css，则 header 的背景为灰色。

如果您在 Chrome 开发人员工具

中查看源代码并美化代码，您可以非常清楚地看到所有这些

Google Apps 脚本未加载 jquery 移动设备 css

Google Apps Script not loading jquery mobile css

google-apps-script

jquery-mobile