2

我有一个脚本，可以将 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";
}

考虑到我不拥有主机页面并且无法设置 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>
4

2 回答 2

1

我想通了，所以我会尝试回答我自己的问题...

第一个重点：用户脚本可以即时设置 Flash 对象的参数 - Sam 在这个问题中的评论让我相信这是不可能的。

第二个重点：出于性能原因（ source1，source2 ），应该使用 wmode 值“opaque”而不是“transparent” 。两者都允许在 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 有性能成本，我会在进行更改之前进行浏览器检查。知道哪个特定功能或规则控制这种分层行为会非常有帮助，这样我的检查就可以更精确。

于 2012-01-18T18:53:04.530 回答
0

当您将 SWF 嵌入 HTML 时，您使用的是哪种wmode ？您将需要使用 wmode 'opaque' 来将 HTML 元素堆叠到您的 flash 元素之上。

于 2012-01-15T19:24:58.633 回答