Question

我正在尝试使用google apps脚本创建我的第一个webapp。我试图按照这些例子但它不起作用。我创建了一个stylesheet.html选项卡以及我的主html页面。但我的格式都不起作用。我认为谷歌将文件附加在一起。仅供参考，如果我将它们包含在主页的底部，我的样式可以正常工作。这是我的code.gs页面：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('frontpage')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);
 }

这是我的主页名为frontpage.html：

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

<?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>


<!--  google scripts says to not include header & body tags ?? -->

<meta charset="utf-8">
    <title>Borah Physics</title>   <!-- google syas not to use title tag  need another way to set title.-->

<h1><div style="text-align:center">Physics Homework</div></h1>



<!--List of available assignments.  This needs to be updated as assignments are added.
   Add assignment name and the ssID of the spreadsheet containing the questions.
   when clicked need to return value (ssid) as sheetID.-->



<select id="assignment">
    <option sheetID="1ajedscAjuXDsUOcQRzru5-bhUIluGn3fPPsoN-Ww5wU">Kinematics 1</option>
    <option sheetID="10mCGpLRwv8ETFbW3RwisI45s_x3-ZItatzq_vU0wacs">Dynamics</option>
</select>


<!--Question should be string variable activeQuestion  It will get updated when the question number changes.-->

<div id="question">
<br>
<br>
Question Here    
<br>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
deserunt mollit anim id est laborum.
<br> <br>
</div>


<!-- If question has an image it will go here.-->
<div id="qImage">
Along with image (if needed)
<br>
</div>

<!-- This is the user inputed answer.  It needs to be recorded in the response sheet of the spreadsheet and
   compared to the correct answer.  (in the comparison we need to add a within x% variable so if the answer
   is close it is counted as correct. This accounts for thinks like g=10 m/s^2 vs 9.8 m/s^2.-->

<div id="answer">
  <label>Answer:</label>
    <input type="text" name="answer"/>
    <input type="Submit" value="Submit"/>
<br>
<br>
</div>


<!-- bottom navigation list-->

<ul id="nav">                                                             
    <li><a>  </a></li>
    <li><input type="button" onclick="previous()" value="Previous"></li>   <!-- goes to previous question  (calls previous function)-->
    <li><a >&nbsp;Correct: 4/12 </a></li>                                 <!-- need to insert variables #correct & total # questions-->
    <li><input type="button" onclick="next()" value="Next"></li>          <!-- goes to next question   (calls next function).-->
    <li><a>  </a></li>

</ul>

最后是我的stylesheet.html页面

        <style>

    #assignment{
      width: 20%; margin: 10 ;
      position: absolute;
        right: 10px;
    }

   #question {
      width: 90%; margin: 0 auto;
    }

    #qImage{
     width: 90%; margin: 0 auto;  
    }

    #answer {
          width: 90%; margin: 0 auto;
    }

    #nav {
        text-align: justify;
        min-width: 400px;
    }
    #nav:after {
        content: '';
        display: inline-block;
        width: 100%;
    }
    #nav li {
        display: inline-block;
    }

    </style>

我的输出显示在页面顶部，就好像它是文本一样。所以我没有将样式表连接到首页。我甚至没有尝试过了解函数或javascript。有很多东西需要学习。（这是一个物理家庭作业应用程序，我希望在学校开始前工作！）所有帮助表示赞赏。那里有导师吗？感谢。

Answer 1

将createHtmlOutputFromFile功能中的createTemplateFromFile更改为doGet()。

应该是：

return HtmlService
  .createTemplateFromFile('frontpage')
  .evaluate()
  .setSandboxMode(HtmlService.SandboxMode.IFRAME);

如果文件中包含scriptlet，则它是一个模板。您的frontpage文件中包含一个scriptlet。 scriptlet是：

<?!= HtmlService.createHtmlOutputFromFile('stylesheet').getContent(); ?>

您也可以从scriptlet调用服务器函数，而不是直接在scriptlet中使用HtmlService。

无法让样式表生效

1 个答案: