Most JavaScript I paste into Modern Script Editor goes into full screen and overrides the whole page.

[ChrisMenning]

Category

• Question
• Bug
• Enhancement

Authors

@wobba

Expected or Desired Behavior

Javascript embeds should be contained inside their containers, not take up the entire page.

Observed Behavior

After having successfully installed, built, and deployed react-script-editor to my SharePoint tenant, I did the following.

• On a Modern page, I add the Modern Script Editor webpart to the page.
• Click "Edit Snippet"
• Paste in Javascript snippet such as:

<script type="text/javascript" src="//25livepub.collegenet.com/scripts/spuds.js"></script>
<script type="text/javascript">
$Trumba.addSpud({
webName: "gs-resources",
spudType : "mix" });
</script>

• Click Publish

Now the ONLY thing that renders on the page is the JavaScript part, taking up the whole page.

Steps to Reproduce

On a Windows 10 machine, Yeoman, Gulp, React, and Node.js 10.0, download sp-dev-fx-webparts.
cd samples/react-script-editor
gulp serve

Even in the Workbench (before deploying) this webpart causes any JavaScipt to override the whole page. The only things displayed on the page are those from the script.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[ChrisMenning]

Update: MOST Javascript snippets behave this way, with the exception of the example in Readme.md. It appears that in order for the snippets to behave correctly, they must have a container written for them.

[ChrisMenning]

Simply trying to contain my snippet inside a div causes the javascript to fail to render.

The following doesn't work:

<div style="width:400px"> 
<script type="text/javascript" src="//25livepub.collegenet.com/scripts/spuds.js"></script>
<script type="text/javascript">
$Trumba.addSpud({
webName: "gs-resources",
spudType : "mix" });
</script>
</div> 

This renders, but it overrides the whole page rather than being embedded on it.

<script type="text/javascript" src="//25livepub.collegenet.com/scripts/spuds.js"></script>
<script type="text/javascript">
$Trumba.addSpud({
webName: "gs-resources",
spudType : "mix" });
</script>

[ChrisMenning]

Disregard this. I kept testing only javascript snippets that were using document.write, which was overwriting the document. A colleague showed me a workaround for these 25Live snippets where you create a div with an ID, then pass that ID into the spud.