Поместите div поверх Flash-объекта с помощью usercript - PullRequest
Новая
       25

Поместите div поверх Flash-объекта с помощью usercript

2 голосов
/ 14 января 2012

У меня есть скрипт, который добавляет 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 появляется поверх Flash-объекта в Chrome, учитывая, что я нене владеет страницей хоста и не может установить параметр wmode объекта 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>

Ответы [ 2 ]

1 голос
/ 18 января 2012

Я понял это, поэтому я попытаюсь ответить на свой собственный вопрос ...

Первый важный момент: пользовательские сценарии могут устанавливать параметры объекта Flash на лету - мне поверилиэто невозможно из-за комментария Сэма в этом вопросе .

Второй важный момент: значение wmode "непрозрачный" должно использоваться вместо "прозрачного" по соображениям производительности ( source1, source2 ).И то, и другое позволяет отображать html-контент поверх объекта Flash.

Поэтому мое решение заключалось в том, чтобы прослушивать, когда на страницу добавляются объекты 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
}

Я до сих пор не понимаю, почемускрипт требует изменения wmode в Chrome, но не в FF.Но поскольку это так, а wmode = opaque снижает производительность, я сделаю проверку в браузере, прежде чем вносить изменения.Было бы очень полезно узнать, какая конкретная функция или правило контролирует это многоуровневое поведение, чтобы моя проверка была более точной.

0 голосов
/ 15 января 2012

Какой wmode вы используете, когда встраиваете свой SWF в HTML? Вам нужно будет использовать wmode 'opaque' для размещения элементов HTML поверх вашего flash-элемента.

...