javascriptonload-event

javascript run as last script after page loaded


I was wondering if it's possible to edit the content of an embedded js which runs and generates dom content. Like for example fb js comments code or analytics code.

Is it possible to run a function as the last function that runs on the site so I can be able to make a modification of the rendered content that the embedded script generated. Let's take an example:

<div id="fb-root"></div>
                <script>(function(d, s, id) {
                  var js, fjs = d.getElementsByTagName(s)[0];
                  if (d.getElementById(id)) return;
                  js = d.createElement(s); js.id = id;
                  js.src = \'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2\';
            fjs.parentNode.insertBefore(js, fjs);
        }(document, \'script\', \'facebook-jssdk\'));</script>

When this code renders it generates a comments box, that looks as follows: enter image description here

IS it possible to run a script after the content has been generated. And lets say modify a span element in the generated output?

Edit: I'M NOT INTERESTED IN CSS SOLUTIONS. I KNOW CSS, I ASKED SPECIFICALLY ABOUT JAVASCRIPT. NOT CSS


Solution

  • If you can work out what className or CSS selector for the parts of the Facebook you want to change. You can directly change the stylesheet for these.

    Below is a little snippet that demonstrates this. If we pretend the classname .test is some CSS selector on this Facebook plugin, you could change the color like below. The setInterval is of course not needed, it's only there to show that it's changing in real time.

    let cssEntry;
    
    for (const s of document.styleSheets) {
      for (const r of s.cssRules)  {
        if (r.selectorText === ".test") {
          cssEntry = r;
        }
      }
    }
    
    let c = 0;
    const colors = ["red", "green", "blue"];
    
    setInterval(() => {
      cssEntry.style["background-color"] = colors[(c++)%3];
    }, 1000);
    .test {
      color: white;
      background-color: black;
    }
    <div class="test">
      <p>This should be white text on black background<p>
      <p>But in a few seconds should change between red / green / blue every second by directly changing the CSS inside the loaded stylesheet</p>
    </div>