Javascript code on remote page not executed in external-html plugin

First, thanks for making jspsych. It is a great help for our projects here at Mozilla.

I noticed an issue with the external-html plugin as it does not execute <script> tags that are included in the remote html page. The problem is that scripts injected by innerHTML on line 85 are inactive.

One solution for this could be to relocate each <script> tag through DOM manipulation to activate their content. I suggest to control this via an additional executeScript parameter.

Parameter definition:

// this code snippet needs to become a new parameter in plugin.info
executeScript: {
   type: jsPsych.plugins.parameterType.BOOL,
   pretty_name: 'Execute scripts',
   default: false,
   description: 'If true, executes scripts on the external html file.'

Then, on line 69 add the following code:

// Scripts injected by innerHTML are inactive.
// To activate them, relocate them through DOM manipulation.
// Only run this if the executeScript parameter is set to true
if (trial.executeScript) {
   for (const scriptElement of display_element.getElementsByTagName("script")) {
   const relocatedScript = document.createElement("script");
   relocatedScript.text = scriptElement.text;
   scriptElement.parentNode.replaceChild(relocatedScript, scriptElement);
   }
}

Happy to turn this into a PR if you wish.

Thanks again, Dominik

[onkeltom]

I agree that this will most likely also solve #332. In the pull request, I made the parameter to run scripts false by default.

I think that also documentation update is required.

[coyiutoc]

@onkeltom Aha, awesome catch! Thank you so much! Really does help to have another set of eyes. Many thanks once again!