Javascript 如何在SPFX的末尾将脚本标记集成到正文标记中_Javascript_Reactjs_Sharepoint_Spfx

Javascript 如何在SPFX的末尾将脚本标记集成到正文标记中

javascript reactjs sharepoint

Javascript 如何在SPFX的末尾将脚本标记集成到正文标记中,javascript,reactjs,sharepoint,spfx,Javascript,Reactjs,Sharepoint,Spfx,大家好，我正在SPFX web部件中尝试java脚本示例。下面是我的JavaScript，您可以参考。在页面中，单击“Yammer”以获取dailog框这是使用头盔。但是没有发现任何成功 public onInit（）：Promise{ //SPComponentLoader.loadScript（'//s0.assets yammer.com/assets/platform_social_buttons.min.js'）； const script1=document.createEle

大家好，我正在SPFX web部件中尝试java脚本示例。下面是我的JavaScript，您可以参考。在页面中，单击“Yammer”以获取dailog框

这是使用头盔。但是没有发现任何成功

public onInit（）：Promise{
//SPComponentLoader.loadScript（'//s0.assets yammer.com/assets/platform_social_buttons.min.js'）；
const script1=document.createElement（“脚本”）；
script1.src=”https://s0.assets-yammer.com/assets/platform_social_buttons.min.js"
script1.crossOrigin=“匿名”
script1.type=“text/javascript”
document.body.appendChild（script1）；
常量脚本=document.createElement（“脚本”）；
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=“匿名”
document.body.appendChild（脚本）；
}

在render中，我像这样提供标记

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

 }

public render（）：void{
var html='Yammer'
this.doElement.innerHTML=html；
}

但我有以下错误

**VM10224:1未捕获引用错误：未定义yam 时间：1:140 ** 任何建议都会有帮助。谢谢

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

请仔细查看这篇文章。我认为您没有创建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>


唠叨
变量选项={
customButton:true，//默认为false。如果您提供自己的按钮来触发共享弹出窗口，则传递true
classSelector:'mybutton css class'，//如果customButton为true，则必须传递按钮的css类名（以便我们可以为您绑定click事件）
defaultMessage:'我的自定义消息'，//可以选择传递消息以预填充您的帖子
pageUrl:'www.microsoft.com'//默认情况下使用当前浏览器url。如果要从其他url生成OG对象，可以传递自己的url。
}; 
yam.platform.yammerShare（期权）；

编辑在查看了您的codesandbox链接之后，您可以做的是更新您的组件，如下所示

    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>
  );
}

函数应用程序（）{
//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({
自定义按钮：对，
类选择器：“mybutton css类”，
defaultMessage：“我的自定义邮件”，
pageUrl:“www.microsoft.com”
});
};
返回(
唠叨
);
}

您还可以将脚本文件包含在body标记之前的公用文件夹中的index.html文件中

<body>
<noscript>
    You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
  This HTML file is a template.
  If you open it directly in the browser, you will see an empty page.

  You can add webfonts, meta tags, or analytics to this file.
  The build step will place the bundled scripts into the <body> tag.

  To begin the development, run `npm start` or `yarn start`.
  To create a production bundle, use `npm run build` or `yarn build`.
-->
<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>


您需要启用JavaScript才能运行此应用程序。
{`yam.platform.yammerShare（{customButton:true，classSelector:'mybutton css class'，defaultMessage:'My custom Message'，pageUrl:'www.microsoft.com'}）；`

检查一下这台机器是否工作正常。我认为您没有创建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>


唠叨
变量选项={
customButton:true，//默认为false。如果您提供自己的按钮来触发共享弹出窗口，则传递true
classSelector:'mybutton css class'，//如果customButton为true，则必须传递按钮的css类名（以便我们可以为您绑定click事件）
defaultMessage:'我的自定义消息'，//可以选择传递消息以预填充您的帖子
pageUrl:'www.microsoft.com'//默认情况下使用当前浏览器url。如果要从其他url生成OG对象，可以传递自己的url。
}; 
yam.platform.yammerShare（期权）；

编辑在查看了您的codesandbox链接之后，您可以做的是更新您的组件，如下所示

    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>
  );
}

函数应用程序（）{
//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({
自定义按钮：对，
类选择器：“mybutton css类”，
defaultMessage：“我的自定义邮件”，
pageUrl:“www.microsoft.com”
});
};
返回(
唠叨
);
}

您还可以将脚本文件包含在body标记之前的公用文件夹中的index.html文件中

<body>
<noscript>
    You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
  This HTML file is a template.
  If you open it directly in the browser, you will see an empty page.

  You can add webfonts, meta tags, or analytics to this file.
  The build step will place the bundled scripts into the <body> tag.

  To begin the development, run `npm start` or `yarn start`.
  To create a production bundle, use `npm run build` or `yarn build`.
-->
<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>


您需要启用JavaScript才能运行此应用程序。
{`yam.platform.yammerShare（{customButton:true，classSelector:'mybutton css class'，defaultMessage:'My custom Message'，pageUrl:'www.microsoft.com'}）；`

我正在尝试在react中实现相同的功能，但这不起作用。在JS中它是有效的。但在react中不是。你能在react中分享你的最简单的例子吗，这样我就可以帮助你了？检查这个链接“>请检查我的最新答案，我也用叉子叉了你的沙箱。我希望这是现在可以接受的答案。在SPFX中没有索引。htmlI正在尝试在react中实现相同的功能，但这不起作用。在JS中它是有效的。但在react中不是。你能在react中分享你的最小示例吗，以便我能提供帮助？检查此链接“>请检查我的更新答案，我也检查了你的沙箱。我希望它现在能成为可接受的答案。在SPFX中没有index.html