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

Question

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

Navigation

#1 by (4 votes)

2

I developed a small plugin commonly known as bookmarklet . This result is almost satisfactory for my case, however, there is an empencilho. For me to start it I have to double click otherwise, it does not launch the player on the page. Since the entire function contains the dynamic mode elements, 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 plugin bookmarklet will apply the "flowplayer":

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

Summary

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

I think something around innerHTML

If I just clicked, the output in console displayed the following alert:

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

Attention - FlowPlayer requires FlashPlayer.

javascript html tag bookmarklet dinamico

asked by anonymous 10.12.2017 / 22:17

1 answer

Transform JsonObject into JsonArray Handler? What is this and what is it for in C / C ++?

score 4 · Accepted Answer

What I think is happening is that the flowplayer script has not yet finished loading on the page and so the flowplayer is not defined error appears on the first click and works seamlessly on 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 is inserted into the page.

Try to use 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 run after the flowplayer script is loaded onto the page.