SPFx - JavaScript函数未触发-Java 学习之路

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

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功能的文章，从那里我可以获得连接的灵感要点并解决我的问题！

回复于 2024-04-24T05:12:40+08:00

SPFx - JavaScript函数未触发

1 回答

相关问题