For what reason, I have to double-click the bookmarklet to insert dynamic content

Question

I’ve developed a little plugin commonly known as bookmarklet. The result is almost satisfactory for my case, however there is a hindrance. For me to start it I have to double click otherwise, it does not launch the player on the page. Since the whole function contains the elements dynamically, that is, it will be included at runtime in the HTML document.

My Bookmarklet

javascript:(function(){
var head=document.getElementsByTagName('head')[0];
var scriptA=document.createElement('script');
scriptA.setAttribute('type', "text/javascript");
scriptA.setAttribute('src', "http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js");
head.appendChild(scriptA);
var link=document.createElement('a');
link.setAttribute('class', "player");
link.setAttribute('id', "player");
link.setAttribute('href', "http://www.hdwplayer.com/videos/2012.mp4");
link.setAttribute('style', "display:block;width:1280px;height:720px;margin:10px auto"); 
document.getElementById('video').appendChild(link);
var body=document.getElementsByTagName('body')[0];
var scriptB=document.createElement('script');
scriptB.setAttribute('type', "text/javascript");
scriptB.innerHTML='flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf")';
body.appendChild(scriptB);
}())

Below is the structure of the HTML document, to perform Test(s) where bookmarklet plugin will apply the "flowplayer":

    &lthtml>
     &lthead>
      &lttitle>Video</title>
      &ltstyle>
        #video {
            background-color: black;
            border: 1px solid red;
            width: 1280px; 
            height: 720px; 
        }
      </style>
     </head>
     &ltbody>
        &ltcenter>
            &ltdiv id='video'></div>
        </center>
     </body>
     </html>

Summary

It seems not to insert the element(s) html and/or script(s) in the first insertion with just one click. This shows that only part of the function is included in the HTML page missing a second click to complement the first one, thus inserting the flowplayer. But why does it happen???

I think something around the innerHTML

If I just click, the output on console displayed the following alert:

After clicking again, there is no alert on console. Everything flows normally.

---

Heed - Flowplayer requires Flashplayer.

Answer 1

What I think is happening is that the flowplayer script is not finished being loaded on the page and that’s why the error appears flowplayer is not defined in the first click and works smoothly in the second (why when you click the second time it is already on the page). I changed your script to use the flowplayer after it was inserted into the page.

Try using this script:

javascript:(function(){
var head = document.getElementsByTagName('head')[0];
var scriptA = document.createElement('script');
scriptA.type = "text/javascript";
scriptA.src = "http://releases.flowplayer.org/js/flowplayer-3.2.13.min.js";
scriptA.onload = function () {
  var link = document.createElement('a');
  link.setAttribute('class', "player");
  link.setAttribute('id', "player");
  link.setAttribute('href', "http://www.hdwplayer.com/videos/2012.mp4");
  link.setAttribute('style', "display:block;width:1280px;height:720px;margin:10px auto"); 
  document.getElementById('video').appendChild(link);
  var body = document.getElementsByTagName('body')[0];
  var scriptB = document.createElement('script');
  scriptB.type = "text/javascript";
  scriptB.innerHTML = 'flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.18.swf")';
  body.appendChild(scriptB);
};
head.appendChild(scriptA);
}())

Everything that depends on the flowplayer has been moved into scriptA.onload which is a callback that will only be executed after the flowplayer script has been loaded into the page.