SPFx

Question

我在我的 web 部件的 render() 方法上组装了一个幻灯片组件，它显示正常，但 Javascript 操作 "ShowSlide()" 是必需的激活幻灯片未在 $().ready()

内发射

我已将呼叫置于

public render(): void {  
  this.domElement.innerHTML = `
      <!-- build the slide here -->
      <div>
         <ul>
            .....
            ..... shortened for brevity 
            .....
         </ul>
      </div>
      <!-- CALL THE SLIDE using $().ready() - it doesn't work -->
      <script type="text/javascript">
        $(document).ready( function() 
            ShowSlide();
        });
      </script>
  `;
}

我运行没主意了，我不知道是什么阻止了函数被触发，我添加了一个小按钮来手动调用这个函数，它在被调用时起作用从按下按钮但不按预期 $().ready()

public render(): void {  
  this.domElement.innerHTML = `
      <!-- manual call for ShowSlide() -- it works when clicked! -->
      <input type="button" value="Start Slide" onClick="ShowSlide()"  />
      <!-- build the slide here -->
      <div>
         <ul>
            .....
            ..... shortened for brevity 
            .....
         </ul>
      </div>
      <!-- CALL THE SLIDE using $().ready() - it doesn't work -->
      <script type="text/javascript">
        $(document).ready( function()
            ShowSlide();
        });
      </script>
  `;
}

Answer 1

我找到了解决问题的方法！我学会了通过在 HEAD 中创建元素来添加脚本，所以我所要做的就是：

  public render(): void {

    this.domElement.innerHTML = this.htmlContents;

    let head: any = document.getElementsByTagName("head")[0] || document.documentElement,
    script = document.createElement("script");
    script.type = "text/javascript";

    try {
        script.appendChild(document.createTextNode(this.htmlScript));
    } 
    catch (e) {
        script.text = this.htmlScript;
    }

    head.insertBefore(script, head.firstChild);
    head.removeChild(script);               
  }

我希望这能帮助遇到同样问题的任何人，我花了 4 天的时间研究、谷歌搜索、阅读所有我能做的事情，直到我在博客上找到一篇关于在 SPFx 中调用 Azure 函数的文章，从那里我可以获得连接点的灵感并解决我的问题！

SPFx - JavaScript 函数未触发

SPFx - JavaScript function not firing

javascript

typescript

sharepoint-online