Pug 文件无法识别 jQuery

Question

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

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

index.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

Answer 1

原来我有一个：

doctype html html(lang="en") head

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

index.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/')

layout.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

Answer 2

当使用document.getElementById时，你不能使用#，因为#是告诉JQuery tab-windo是一个ID的选择器。在这里，您已经选择了一个 ID，所以：

document.getElementById('tab-window')

然后，您不想更改 iframe 的内容 (innerHTML)，但它是源 (src)，所以我们现在有了：

document.getElementById('tab-window').src = inputMessage

编辑

您可以尝试等待 DOM 内容被加载，然后执行您的脚本：

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");
  // do your stuff here
});

或者（更明确地）等待 JQuery 被加载：

See this answer

希望对你有帮助，让我更新，
问候