Question

我有一个脚本，它将div添加到包含全屏Flash对象的页面，如下所示：

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);

在Firefox（在Greasemonkey上运行）中，myDiv显示在Flash对象的顶部。在Chrome中（在Tampermonkey上运行），它会添加到下面。我似乎无法通过设置z-index来改变它 - 它被忽略了。

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

我是否有办法让myDiv出现在Chrome中的Flash对象之上，考虑到我没有自己的主页并且无法设置Flash对象的wmode参数？为什么FF与Chrome有不同的表现？

ETA主页（glitch.com/game）来源摘录：

<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>

Answer 1

我明白了，所以我会试着回答我自己的问题......

第一个要点：用户脚本可以动态设置Flash对象的参数 - 我被引导相信Sam在this question中的评论是不可能的。

第二个要点：出于性能原因（source1，source2），应使用wmode值“opaque”而不是“透明”。两者都允许在Flash对象之上绘制html内容。

所以我的解决方案是监听Flash对象何时被添加到页面中（或者我认为如果你的目标是Flash对象，这些对象不是动态添加的，你可以直接得到它们），找到一个wmode参数。我想更改，克隆它，并用我的克隆替换原始参数：

// 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
}

我仍然不明白为什么脚本需要在Chrome中更改wmode而在FF中不需要。但是既然如此，并且wmode = opaque有性能成本，我会在进行更改之前进行浏览器检查。知道哪个特定功能或规则控制此分层行为以便我的检查可以更精确，这将非常有用。

Answer 2

当您在SWF中嵌入SWF时，您使用的是哪个wmode？您需要使用wmode'opaque'才能在Flash元素的顶部堆叠HTML元素。

使用userscript将div放在Flash对象上

2 个答案: