如何将 Script 标签集成到 SPFX 末尾的 body 标签中

Question

您好，我正在我的 SPFX 网络部件中尝试 java 脚本示例。下面是我的 JavaScript 你可以参考一下。 JavaScript Code在页面中单击 "Yammer" 以获取对话框

这是在使用头盔。但是没有找到任何成功。

 public onInit(): Promise<void> {    

//SPComponentLoader.loadScript('//s0.assets-yammer.com/assets/platform_social_buttons.min.js');


const script1 = document.createElement("script");
script1.src = "https://s0.assets-yammer.com/assets/platform_social_buttons.min.js"
script1.crossOrigin = "anonymous"
script1.type="text/javascript"
document.body.appendChild(script1);

const script = document.createElement("script");
const scriptText = document.createTextNode("var options = {customButton : true, classSelector: 'mybutton-css-class',defaultMessage: 'My custom Message',pageUrl: 'www.microsoft.com'}; yam.platform.yammerShare(options);");
script.appendChild(scriptText);
script.type="text/javascript"
script.crossOrigin = "anonymous"
document.body.appendChild(script);
}

在渲染中我提供这样的标签，

public render(): void {
 var html = '<div><span class="mybutton-css-class">Yammer</span></div>'
 this.domElement.innerHTML = html;    

 }

但我收到以下错误，

**VM10224:1 Uncaught ReferenceError: yam 未定义在：1：140 ** 任何建议都会有所帮助。谢谢

我已经按照大多数参考文献解决了这个问题，但 none 奏效了。

Answer 1

看看这个 JSFiddle 工作得很好。我认为您不是在创建 yam 实例。这就是它给出 ReferenceError 的原因。

<html>
<body>

<span class="mybutton-css-class">yammer</span>
<script type="text/javascript" src="https://s0.assets-yammer.com/assets/platform_social_buttons.min.js"></script>
<script type="text/javascript">
  var options = {
    customButton : true, //false by default. Pass true if you are providing your own button to trigger the share popup
    classSelector: 'mybutton-css-class',//if customButton is true, you must pass the css class name of your button (so we can bind the click event for you)
    defaultMessage: 'My custom Message', //optionally pass a message to prepopulate your post
    pageUrl: 'www.microsoft.com' //current browser url is used by default. You can pass your own url if you want to generate the OG object from a different URL.
  }; 
  yam.platform.yammerShare(options);
</script>
</body>
</html>

编辑查看您的代码框 link 后，您可以像下面那样更新您的组件

    function App() {
  //var options = { customButton:true ,classSelector: 'mybutton-css-class',defaultMessage: 'My custom Message',pageUrl: 'www.microsoft.com' };
  const onClickHandler = () => {
    const yam = window.yam;
    yam.platform.yammerShare({
      customButton: true,
      classSelector: "mybutton-css-class",
      defaultMessage: "My custom Message",
      pageUrl: "www.microsoft.com"
    });
  };
  return (
    <div className="App">
      <Helmet />
      <span className="mybutton-css-class" onClick={onClickHandler}>
        yammer
      </span>
    </div>
  );
}

您还可以在 body[=23= 之前的 public 文件夹中的 index.html 文件中包含脚本文件] 标签。

<body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div>  <script type="text/javascript" src="https://s0.assets-yammer.com/assets/platform_social_buttons.min.js" crossorigin="anonymous" async="true" /> <script type="text/javascript"> {`yam.platform.yammerShare({ customButton:true ,classSelector: 'mybutton-css-class',defaultMessage: 'My custom Message',pageUrl: 'www.microsoft.com' });`} </script></body>

如何将 Script 标签集成到 SPFX 末尾的 body 标签中

How to integrate Script tag into a body tag at end in an SPFX

javascript

sharepoint

reactjs

spfx