Question

我想将applet从div元素移动到另一个div元素而不重新加载它。我不想使用绝对定位。有没有办法做到这一点？

我试试这个，但它不起作用：

<html>
    <head>
    <script type="text/javascript">
        function toDiv1() {
            var appletElt = document.getElementById('myApplet');
            document.getElementById('div1').appendChild(appletElt);
        }

        function toDiv2() {
            var appletElt = document.getElementById('myApplet');
            document.getElementById('div2').appendChild(appletElt);
        }
    </script>
    </head>
    <body>
        <div id ="myApplet">
            <applet width="200" height="200" 
                codebase="http://mainline.brynmawr.edu/Courses/cs110/spring2002/Applets/Smiley/"
                code="Smiley.class"
                name="Smiley">
            </applet>
        </div>
        <div id="div1"></div>
        <div id="div2"></div>
        <div>
            <button onclick="toDiv1()">toDiv1</button>
            <button onclick="toDiv2()">toDiv2</button>
        </div>
    </body>
</html>

您可以在fiddle

上尝试答案

@goldenparrot与outerHTML提出的解决方案有效但不适用于所有浏览器（至少是Firefox ESR）。

如@kritzikratzi答案和@biziclop答案中所述，firefox中存在已知问题，在Firefox中重新加载iframe，flash对象，插件。

我认为（但我不确定）唯一的解决方案是使用绝对定位（@cuzzea）。但是，我问这个问题是因为我想找到另一种方式（“我不想使用绝对定位”）。这就是我不会给出答案的原因。

感谢您的贡献。

Answer 1

我不认为你所寻找的是可行的，但如果你想使用定位你可以试试这个：

http://fiddle.jshell.net/JRZXF/12/

HTML：

<div style="position:relative">
    <div>
        To test your code, make the smiley sad, then move it to another div. It must be still sad.    
    </div>

    <br>
    <div id ="myApplet">
        <applet width="200" height="200"
            codebase="http://mainline.brynmawr.edu/Courses/cs110/spring2002/Applets/Smiley/"
            code="Smiley.class"
            name="Smiley">
        </applet>
    </div>
    <div id="div1"></div>
    <br>
    <div id="div2"></div>
    <br>
    <div>
        <button id="button1">toDiv1</button>
        <button id="button2">toDiv2</button>
    </div> 
</div>

使用Javascript：

function toDiv1() {
    $('#div1,#div2').empty();
    var el = $('#myApplet'),
        div = $('#div1'),
        clone_div = $('<div>');
    var width = 200,
        height = 200;
    clone_div.css({width:width,height:height});
    div.append(clone_div);
    el.css({
        position:'absolute'});
    el.css({
        left:clone_div.offset().left,
        top:clone_div.offset().top
    });
}

function toDiv2() {
    $('#div1,#div2').empty();
    var el = $('#myApplet'),
        div = $('#div2'),
        clone_div = $('<div>');
    var width = 200,
        height = 200;
    clone_div.css({width:width,height:height});
    div.append(clone_div);
    el.css({
        position:'absolute'});
    el.css({
        left:clone_div.offset().left,
        top:clone_div.offset().top
    });
}

$('#button1').click(toDiv1);
$('#button2').click(toDiv2);

当然，这段代码可以进行很多改进，并且可以更好地工作。要使此示例起作用，您需要所有嵌套的div具有相对位置。我也给了宽度和高度200，但你可以把它变成dinamic，类似于：

var width = el.width()

或

var width = el.children('applet').attr('width');

Answer 2

可能是“单纯运气不好”的情况，谷歌搜索显示有许多听起来相关的浏览器错误：

无法在没有重新加载的情况下在dom中移动iframe：

https://bugzilla.mozilla.org/show_bug.cgi?id=254144（开放）
https://bugs.webkit.org/show_bug.cgi?id=13574（开放）

无法在dom中移动插件

https://bugzilla.mozilla.org/show_bug.cgi?id=90268（已在FF13中修复）

你最好的镜头可能是使用element.adoptNode（...）和已经提到的outerHtml。祝你好运:)

（很想测试，但由于os x上的所有java乱，我甚至无法运行java插件atm）

Answer 3

我在IE8上尝试了以下内容

applet=document.getElementById('myapplet');
applet.outerHTML='<div id="my_div">'+applet.outerHTML+'</div>';

这会导致applet被停止，销毁，启动并重新启动。所以这似乎表明outerHTML不起作用。此外，Firefox 13上的outerHTML将换行符作为返回的第一个字符。使用它来搜索outerHTML返回的内容时要小心。

此外，gontard的原帖似乎适用于Firefox 13（不使用outerHTML或其他技巧）

移动applet而不重新加载它

3 个答案: