0

我在我的 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>
  `;
}
4

1 回答 1

2

我找到了解决我的问题的方法！我通过在 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 函数的文章，从那里我可以获得连接的灵感点，解决我的问题！

于 2018-06-21T02:03:39.000 回答