0

I am attempting to make a very simple web part that allows me to add a <script> tag to the bottom of the <body> element. I am in the stage of using gulp serve to test my part in local workbench. I have created the web part with the appropriate properties and as long as I keep one specific line commented, it works as a part, it just doesn't do the thing I need it to.

However as soon as I uncomment the key line: document.body.innerHTML+=newHTML; and load the part, all other JS on the page fails. I can no longer open properties or interact with the page sections. All the buttons stop working and I can't delete the part either.

When I inspect the body element, I can see that whatever I've set for newHTML is present just above the closing </body> tag, so I know that the innerHTML call was successful. I've tried using plain text here, too, and the same issue occurred so I know its an issue with the innerHTML call and not the script itself.

The most baffling thing about this is that my console doesn't have any errors. One would think that with a bunch of JS scripts and event listeners stopping working I'd see a bunch of errors in the console...nope. I'm usually pretty decent at working through errors, but this silent failure has me stumped.

Here is the relevant code from my primary .ts file:

export interface IAppendBodyPartWebPartProps {
  element: string;
}

export default class AppendBodyPartWebPart extends BaseClientSideWebPart<IAppendBodyPartWebPartProps> {

  public render(): void {
    var newHTML = `${ this.properties.element }`;
    document.body.innerHTML+=newHTML;

  }

Please let me know if there are other pieces of the code that would be helpful to include.

1

Try your code using in below format:

private _JS: string = "https://*******.sharepoint.com/sites/CommunicationSiteTopic/Shared%20Documents/MyScript.js";

let articleRedirectScriptTag: HTMLScriptElement = document.createElement("script");
articleRedirectScriptTag.src = this._JS;
articleRedirectScriptTag.type = "text/javascript";
document.body.appendChild(articleRedirectScriptTag);

Source:

Step By Step Procedure To Add A JS File To All Pages In A SPFx Modern Pages Using SharePoint Framework Extension.

1
  • 1
    Wonderful thank you for the help. I had to remove the 'private' declaration as it was throwing errors, but making _JS into a string variable and removing the this. has gotten it working! In the persuit of learning, do you perhaps know why using innterHTML was causing the silent failure but appendChild isnt?
    – Ian Brooks
    Dec 13 '19 at 19:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.