Question

我为Node / Express应用程序提供了一个简单的Pug界面，其中包括一个WebChat小部件和一些带有iFrame的选项卡。我想使用jQuery代码段捕获变量并将其放入选项卡iFrame中的URL中。现在，我只是想使Wikipedia URL正常工作（变量为 inputMessage ）。

问题是我需要jQuery成为我的WebChat小部件脚本的一部分，以便从其输入框捕获用户的输入（将其捕获到变量中），但是随后脚本运行并且甚至没有创建页脚选项卡但是，当项目运行时，我从Wikipedia中获得了一个“未定义”的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

使用document.getElementById时，请勿使用 # ，因为#是告知JQuery tab-windo 的选择器。 em>是一个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

希望有帮助，让我保持最新状态，
问候

Answer 2

原来我有一个：

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

Pug文件无法识别jQuery

2 个答案: