javascript - Pug 文件无法识别 jQuery

Question

我的 Node/Express 应用程序有一个简单的 Pug 界面，其中包括一个 WebChat 小部件和一些包含 iFrame 的选项卡。我想使用 jQuery 片段来捕获变量并将其放入位于选项卡 iFrame 内的 URL 中。现在，我只是想让 Wikipedia URL 工作（变量是inputMessage）。

问题是我需要 jQuery 成为我的 WebChat 小部件脚本的一部分，以便从其输入框中捕获用户的输入（到变量中），但是脚本运行并且页脚选项卡甚至还没有创建，所以当项目运行时，我从维基百科得到一个“未定义”作为 URL，因为inputMessage从未正确放置在那里。但我也不能在脚本之前放置页脚，因为选项卡式 iFrame 在页面上需要低于聊天小部件。我想有很多方法可以实现这一目标。我是 Pug 和脚本的新手，所以我还不知道有什么方法。

指数.pug

extends layout

block content

  doctype html
  html(lang="en")
    head
      meta(charset='utf-8')
      meta(name='viewport' content='width=device-width, initial-scale=1')
      script(src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js')

    article
      ul
        li.title Study Bot
        li.robot 
          img(src='/images/robot-face.jpg' alt='Robot face')

    chat-window
      #webchat(action='/chat', method='POST')
      script(src='https://cdn.botframework.com/botframework-webchat/latest/webchat.js')
      script.
        const styleSet = window.WebChat.createStyleSet({
          bubbleBackground: 'rgba(252, 229, 53, 1)',
          bubbleFromUserBackground: 'rgba(4, 234, 104, 1)',
          paddingRegular: 10,
          sendBoxHeight: 50,  
          bubbleMinWidth: 400,
          bubbleMaxWidth: 700
        });
        window.WebChat.renderWebChat({
        directLine: window.WebChat.createDirectLine({ secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' }),
        styleSet
        }, document.getElementById('webchat'));

        // Add on keypress listener to text input and wait for the user to hit the `enter` key
        $("input[aria-label='Type your message']").on('keypress', event => {
          // Check if user pressed `enter`
          if (event.which === 13){
            var inputMessage = $("input[aria-label='Type your message']").val();
            document.getElementById('#tab-window').innerHTML = inputMessage;
          }
        });

    footer
      .tab
        button.tablinks(onclick="openSite(event, 'Encyclopedia')") Encyclopedia
        button.tablinks(onclick="openSite(event, 'MSAcademic')") Microsoft Academic
        button.tablinks(onclick="openSite(event, 'NewsBlogs')") News / Blogs
      #Encyclopedia.tabcontent
        iframe#tab-window(src=`https://en.wikipedia.org/wiki/${inputMessage}`)
      #MSAcademic.tabcontent
        iframe#tab-window(src='https://academic.microsoft.com/')
      #NewsBlogs.tabcontent
        iframe#tab-window(src='https://www.bing.com/')

    script
      include ../routes/index.js

标签： javascriptjquerynode.jspug

Answer 1

原来我有一个：

doctype html html(lang="en") head

在我的 index.pug 文件和我的 layout.pug 文件中。我只在我的 layout.pug 文件中需要它，所以我猜这个脚本在阅读时遇到了麻烦。由于我是 Pug 的新手，所以我忽略了这一点。所以现在我有以下有效的代码：

指数.pug

extends layout

block content

  article
    ul
      li.title Study Bot
      li.robot
        img(src='/images/robot-face.jpg' alt='Robot face')

  chat-window
    #webchat(action='/chat', method='POST')
    script(src='https://cdn.botframework.com/botframework-webchat/latest/webchat.js')
    script.
      const styleSet = window.WebChat.createStyleSet({
        bubbleBackground: 'rgba(252, 229, 53, 1)',
        bubbleFromUserBackground: 'rgba(4, 234, 104, 1)',
        paddingRegular: 10,
        sendBoxHeight: 50,
        bubbleMinWidth: 400,
        bubbleMaxWidth: 700
      });

      window.WebChat.renderWebChat({ directLine: window.WebChat.createDirectLine({ 
      secret: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' }), 
      styleSet}, 
      document.getElementById('webchat'));

      // Add on keypress listener to text input and wait for the user to hit the `enter` key
      $("input[aria-label='Type your message']").on('keypress', event => {

        // Check if user pressed enter
        if (event.which === 13) {
          var inputMessage = $("input[aria-label='Type your message']").val();

          var wiki = 'https://en.wikipedia.org/wiki/' + inputMessage;
          var encycl = 'https://academic.microsoft.com/#/search?iq=%40' + inputMessage + '%40&q=' + inputMessage;
          var newsBlogs = 'https://www.bing.com/search?q=' + inputMessage;

          document.getElementById('tab1-window').src =  wiki;
          document.getElementById('tab2-window').src = encycl;
          document.getElementById('tab3-window').src = newsBlogs;
        }
      });

  tabs-container
    .tab
      button.tablinks(onclick="openSite(event, 'Encyclopedia')") Encyclopedia
      button.tablinks(onclick="openSite(event, 'MSAcademic')") Microsoft Academic
      button.tablinks(onclick="openSite(event, 'NewsBlogs')") News / Blogs
    #Encyclopedia.tabcontent
      iframe#tab1-window(src='https://en.wikipedia.org/wiki/')
    #MSAcademic.tabcontent
      iframe#tab2-window(src='https://academic.microsoft.com/')
    #NewsBlogs.tabcontent
      iframe#tab3-window(src='https://www.bing.com/')

布局.pug

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/main.css')
    meta(charset='utf-8')
    meta(name='viewport' content='width=device-width, initial-scale=1')
    script(src='https://code.jquery.com/jquery-3.3.1.min.js')
    script
      include ../routes/index.js

  body
    block content