移动applet而不重新加载它

Question

移动applet而不重新加载它

我想将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>

Run Code Online (Sandbox Code Playgroud)

你可以试试这个小提琴

@goldenparrot提出的解决方案outerHTML有效但不适用于所有浏览器(至少是Firefox ESR).

正如@kritzikratzi答案和@biziclop答案中所述,firefox上存在已知问题,重新加载iframe,flash对象,firefox中的插件.

我认为(但我不确定)唯一的解决方案是使用绝对定位(@cuzzea).但是,我问这个问题是因为我想找到另一种方式("我不想使用绝对定位").这就是我不会给出答案的原因.

谢谢你的贡献.

Answer 1

Pra*_*nth 2

现在，我想出了一个~~出色的~~（：D）解决方案，使用outerHTML：

function toDiv1() {

  var appletElt = document.getElementById('myApplet');

  var Div1 = document.getElementById('div1');

  var parts = Div1.outerHTML.split(">"+Div1.innerHTML+"<");

  // newHTML can also be appletElt.outerHTML
  var newHTML = Div1.innerHTML + appletElt.outerHTML;

  // Deleting Div1 because you will have multiple divs on page with id='div1'!
  Div1.parentNode.removeChild(Div1);

  appletElt.outerHTML = parts[0] + newHTML + parts[1];

}

Run Code Online (Sandbox Code Playgroud)

重要提示：首先，您的applet标签也必须关闭。我的意思是：<applet></applet>

同样重要的是：

关于该解决方案，您应该了解一些事项。

该解决方案仅在第一次有效。也就是说，您可以将其移动到 div1或div2。
如果您多次单击两个按钮或一个按钮， HTML将会损坏。

您必须toDiv2()通过用单词（Div1&& div1）替换toDiv1()单词（Div2&& div2）来编写函数。

即使这不是最好的解决方案，我也会发布此内容，因为我相信，如果您走在正确的轨道上，您可以弄清楚如何使其即使多次点击也能工作。而且，在看到这个答案后，您应该是这样的。

编辑：

这是解决方案尝试做的基本事情：

appendChild 将创建一个新元素并追加它。如果创建了一个新元素，它也不是您想要的。

externalHTML 是 HTMLElement 的一个属性，您可以更改。有关outerHTML 的演示，请参阅此小提琴的工作原理。

归档时间：	13 年，9 月前
查看次数：	888 次
最近记录：	13 年，4 月前