Home/ Questions/Q 7129201
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T11:13:05+00:00

I have a script which adds a div to a page containing a full-screen

  • 0

I have a script which adds a div to a page containing a full-screen Flash object, like this:

var myDiv= document.createElement("div");
myDiv.style.background = "red";
myDiv.style.width = "30px";
myDiv.style.height = "30px";
myDiv.style.position = "absolute";
myDiv.style.top = "0";
myDiv.style.left = "0";
document.body.appendChild(myDiv);

In Firefox (running on Greasemonkey), myDiv appears on top of the Flash object. In Chrome (running on Tampermonkey), it is added underneath. I can’t seem to change this by setting z-index – it is ignored.

// code which apparently does nothing:
myDiv.style.zIndex = "999";
var swf_div = document.getElementById("swf_div");
if (swf_div) {
    swf_div.style.zIndex = "-999";
}

Is there any way I can get myDiv appearing on top of the Flash object in Chrome, considering that I don’t own the host page and cannot set the wmode param of the Flash object? Why does it behave differently in FF vs Chrome?

ETA host page (glitch.com/game) source excerpt:

<body>
    ...
    <div id="client_div" style="width: 1680px; left: 0pt;">
        <object id="swf_div" width="100%" height="100%" type="application/x-shockwave-flash" data="http://c1.glitch.bz/swf/Boot_78793.swf" style="visibility: visible;">
            <param name="allowscriptaccess" value="always">
            <param name="allownetworking" value="all">
            <param name="wmode" value="direct">
            <param name="flashvars" value="--- auth tokens, omitted ---">
        </object>
    </div>
    ...
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I figured it out, so I’ll try to answer my own question…

    First important point: userscripts can set params of a Flash object on the fly – I’d been led to believe that wasn’t possible by Sam’s comment in this question.

    Second important point: the wmode value “opaque” should be used rather than “transparent” for performance reasons (source1, source2). Both allow html content to be drawn on top of the Flash object.

    So my solution was to listen for when Flash objects are added to the page (or I think if you are targeting Flash objects which aren’t added dynamically, you could just get them straightaway), find the wmode param of the one I want to change, clone it, and replace the original param with my clone:

    // code to create and style myDiv, see original question

document.addEventListener("DOMNodeInserted", nodeInserted, false);

function nodeInserted(e) {
    if (e.target.id == "swf_div") { 

        var found = false;

        var params = e.target.getElementsByTagName("param");
        for (var i = 0; i < params.length; i++) {
            if (params[i].getAttribute("name") == "wmode") {
                var clone = params[i].cloneNode(true);
                clone.setAttribute("value", "opaque");
                params[i].parentNode.replaceChild(clone, params[i]);
                found = true;
                break;
            }
        }

        // in case swf_div doesn't already have a wmode param
        if (!found) {
            var clone = e.target.cloneNode(true); 
            var param = document.createElement("param");
            param.setAttribute("name", "wmode");
            param.setAttribute("value", "opaque");
            clone.appendChild(param);        
            e.target.parentNode.replaceChild(clone, e.target);
        }

        continueScript();
    }
}

function continueScript() {
    document.body.appendChild(myDiv);

    // do wonderful things
}

    I still don’t understand why the script requires a wmode change in Chrome but not in FF. But since that is the case, and wmode=opaque has a performance cost, I’ll do a browser check before making the change. It would be very helpful to know which specific feature or rule controls this layering behaviour so that my check could be more precise.

    • 0