Javascript 使用userscript将div放置在Flash对象上_Javascript_Flash_Greasemonkey_Tampermonkey

Javascript 使用userscript将div放置在Flash对象上

javascript flash

Javascript 使用userscript将div放置在Flash对象上,javascript,flash,greasemonkey,tampermonkey,Javascript,Flash,Greasemonkey,Tampermonkey,我有一个脚本，它向包含全屏Flash对象的页面添加一个div，如下所示： 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";

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

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索引来改变这一点——它被忽略了

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

考虑到我没有主机页，也无法设置Flash对象的wmode参数，有没有办法让myDiv出现在Chrome中Flash对象的顶部？为什么它在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>


...
...

在HTML中嵌入SWF时，您使用的是哪一种？您需要使用wmode“不透明”，以便将HTML元素堆叠到flash元素的顶部。

我已经解决了这个问题，所以我将尝试回答我自己的问题

第一个要点：用户脚本可以动态地设置Flash对象的参数——Sam在中的评论让我相信这是不可能的

第二个要点：出于性能原因（，），应该使用wmode值“不透明”而不是“透明”。两者都允许在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
}

//创建myDiv并设置其样式的代码，请参见原始问题
文件。添加的文件列表（“域节点插入”，节点插入，错误）；
功能节点已插入（e）{
如果（e.target.id==“swf_div”）{
var=false；
var params=e.target.getElementsByTagName（“参数”）；
对于（变量i=0；i


我仍然不明白为什么脚本需要在Chrome中更改wmode，而不是在FF中。但由于情况就是这样，而且wmode=opaque会带来性能代价，所以在进行更改之前，我将进行浏览器检查。了解哪个特定功能或规则控制此分层行为将非常有帮助，以便我的检查更精确。
如果用户脚本能够在外部Flash对象上设置参数，请解释如何设置？否则，看起来你真的忽略了我的问题。链接到有问题的页面。。。还可以尝试更改节点的顺序。替换document.body.appendChild（myDiv）带有：var targ=document.querySelector（“body*”）/*第一个子项*/target.parentNode.insertBefore（myDiv，targ）页面为www.glitch.com/game，但除非您是已登录的玩家，否则不会运行该页面。我在上面的帖子中添加了一些源代码，这是我在Firebug中检查Flash对象时看到的。也尝试了你的建议-myDiv不会出现在我的目标页面上，也不会出现在没有Flash内容的其他页面上。