SPFx-JavaScript函數未觸發

Question

我在Web部件的render（）方法上組裝了一個幻燈片組件，它的顯示效果很好，但是在$().ready()內未激活激活幻燈片所需的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);               
  }

我希望這可以幫助任何面臨相同問題的人，花四天的時間研究，搜索，閱讀所有可能的知識，直到我在博客上找到有關在SPFx中調用Azure函數的文章，從那里我可以得到啟發來進行連接要點，解決我的問題！