Executing a – 4ndy Apr 10 '18 at 21:33

Question

On a whim I made this change:

// document.getElementById('scriptMe').appendChild(s);
document.body.appendChild(s);

and boom, script runs and video loads.

Which is super interesting, because "why", right?

Edit: In addition, trying other script injection methods discussed here.

document.write method

document.write(s.outerHTML) // s is a script node

also works. In fact, you can embed that script node in a div and it works as well.

createContextualFragment method

// var $container = document.getElementById('scriptMe'); // does not work
var $container = document.body
var range = document.createRange()
$container.appendChild(range.createContextualFragment(script_str))

works, where script_str is an html string literal. This will work both as "<script>....</script>" or "<div id="myDiv"><script>...</script></div>"

but all the methods I tested ultimately needed injection to be done in body.

codepen

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

4

On a whim I made this change:

// document.getElementById('scriptMe').appendChild(s);
document.body.appendChild(s);

and boom, script runs and video loads.

Which is super interesting, because "why", right?

Edit: In addition, trying other script injection methods discussed here.

document.write method

document.write(s.outerHTML) // s is a script node

also works. In fact, you can embed that script node in a div and it works as well.

createContextualFragment method

// var $container = document.getElementById('scriptMe'); // does not work
var $container = document.body
var range = document.createRange()
$container.appendChild(range.createContextualFragment(script_str))

works, where script_str is an html string literal. This will work both as "<script>....</script>" or "<div id="myDiv"><script>...</script></div>"

but all the methods I tested ultimately needed injection to be done in body.

codepen

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 11 '18 at 00:34

uncleoptimus

360
2
8

Wow that's very annoying. You're amazing for figuring that out! Do you have any idea on how I would load this into a specified div? – 4ndy Apr 11 '18 at 00:52
There is, sort of. But it might not fit your criteria. First of all, [tip o the hat to this article](https://ghinda.net/article/script-tags/). And here is [a forked pen with the working example](https://codepen.io/uncleoptimus/pen/vRPKrq?editors=1010). Uses `createContextualFragment` but *notice how the fragment must include the `div` container*! In all the methods I tried, I had to append to the `body` to get the script to run. Very interesting. The linked article has another method you can test as well. – uncleoptimus Apr 11 '18 at 01:15
Thanks for your detailed answer! It appears you're correct in only being able to append to the document.body. I was able to move the video with the below code (Setting a timeout for 3 seconds and using a fragment). I see many potential problems with this though, the first being what happens if it takes longer than 3 seconds for the video to load? setTimeout(function(){ var fragment = document.createDocumentFragment(); fragment.appendChild(document.getElementById('container')); document.getElementById('scriptMe').appendChild(fragment); }, 3000); – 4ndy Apr 11 '18 at 13:51
Yea I am in the dark as to *why* exactly this is the case but my suspicion is that it has something to do with the nba video player library. What I realized after a bit of testing was that the player script *does load and run*, no issue, as we expected! But when it does execute, some condition check or whatnot in the player script causes the `init()` function to not be run. So for now,, I will just blame it on them hahah – uncleoptimus Apr 17 '18 at 01:23

1 Answers1

document.write method

createContextualFragment method