Как интегрировать тег Script в тег body в конце в SPFX - PullRequest
Новая
       6

Как интегрировать тег Script в тег body в конце в SPFX

1 голос
/ 08 января 2020

Привет, я пробую пример сценария java в моей веб-части SPFX. Ниже мой JavaScript вы можете сослаться. JavaScript Код На странице нажмите на «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 ** Любые предложения будут полезны. Спасибо

И я следовал большинству ссылок, чтобы решить проблему, но ни одна не сработала.

1 Ответ

0 голосов
/ 08 января 2020

Проверьте это 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>

Редактировать После просмотра ссылки на коды и коробки вы можете обновить компонент, как показано ниже 

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

Кроме того, вы можете включить файлы сценариев в индекс . html в папке publi c перед тегом body . 

<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>
...