admin管理员组

文章数量:1425802

I want to move an applet from a div element to another div element without reloading it. I don't want to use absolute positioning. Is there a way to do this ?

I try this but it's not working:

<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="/"
                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>

You can try your answer on this fiddle

The solution proposed by @goldenparrot with outerHTML works but not on all the browser (at least Firefox ESR).

As stated in the @kritzikratzi answer and in the @biziclop answer, there are known problems on firefox with the reloading of iframe, flash object, plugin in firefox.

I think (but i am not sure) that the sole solution is to use absolute positionning (@cuzzea). However, i asked this question because i wanted to find another way ("I don't want to use absolute positioning"). This is why i will award no answer.

Thanks for your contributions.

I want to move an applet from a div element to another div element without reloading it. I don't want to use absolute positioning. Is there a way to do this ?

I try this but it's not working:

<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>

You can try your answer on this fiddle

The solution proposed by @goldenparrot with outerHTML works but not on all the browser (at least Firefox ESR).

As stated in the @kritzikratzi answer and in the @biziclop answer, there are known problems on firefox with the reloading of iframe, flash object, plugin in firefox.

I think (but i am not sure) that the sole solution is to use absolute positionning (@cuzzea). However, i asked this question because i wanted to find another way ("I don't want to use absolute positioning"). This is why i will award no answer.

Thanks for your contributions.

  • java
  • javascript
  • html
  • applet
Share Improve this question edited Sep 18, 2012 at 8:00 gontard asked Aug 22, 2012 at 11:04 gontardgontard 29.6k11 gold badges95 silver badges118 bronze badges 8
  • What move code triggered a reload? Show us what you have tried. – Bergi Commented Aug 22, 2012 at 11:11
  • Thanks, but I don't know a solution either – Bergi Commented Aug 22, 2012 at 12:43
  • 1 This might be a related Firefox bug: stackoverflow./questions/3963283/… – biziclop Commented Sep 10, 2012 at 12:24
  • @biziclop Yes it seems :( i think the sole solution is to use absoule positionning. – gontard Commented Sep 11, 2012 at 8:48
  • Did you try moving the div on the whole to another node? – Sri Harsha Chilakapati Commented Sep 15, 2012 at 1:21
 |  Show 3 more ments

4 Answers 4

Reset to default 3 +50

I don't think that what you are looking for is posible, but if you want to use positioning you can try this:

http://fiddle.jshell/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);​

Of course this code can be improved a lot and made to work nicer. For this example to work you need all the nested divs to have position relative. I also gave the width and height 200 but you can make it dinamic, something like:

var width = el.width()

or

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

Now, I have e up with a brilliant( :D ) solution using 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];

}

IMPORTANT: First, your applet tag must close too. I mean like: <applet></applet>

Also Important:

There are some things you should know about the solution.

  1. The solution only works the first time. That is, you can move it to div1 or div2.
  2. The HTML WILL break if you click two buttons or one button more than once.
  3. You have to write toDiv2() function by replacing words (Div1 && div1) in toDiv1() with words (Div2 && div2).

I am posting this even if isn't the best solution because, I believe you can figure out how to make it work even for multiple clicks if you are on right track. And, you should be, after seeing this answer.

EDIT:

Here is the basic thing solution tries to do:

appendChild will create a new element and append it. And if a new element is created, it's not what you want.

outerHTML is a property of HTMLElement that you can change. For demonstration of outerHTML see how this fiddle works.

might be a case of "simply out of luck", googling a bit shows there are many browser bugs that sound related:

can't move iframe in dom without reloading:

  • https://bugzilla.mozilla/show_bug.cgi?id=254144 (open)
  • https://bugs.webkit/show_bug.cgi?id=13574 (open)

can't move plugin in dom

  • https://bugzilla.mozilla/show_bug.cgi?id=90268 (fixed in FF13)

your best shot might be playing around with element.adoptNode(...) and the already mentioned outerHtml. good luck :)

(would love to test, but because of all the java mess on os x i can't even run the java plugin atm)

I tried the following on IE8

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

and this causes the applet to be stopped, destroyed, initted and started again. So this seems to demonstrates that outerHTML does not work. Also, outerHTML on Firefox 13 puts a newline as the first character returned. Just beware when using it to search for the content returned by outerHTML.

Also, the original post by gontard seems to work on Firefox 13 (without using outerHTML or other tricks)

本文标签： javaMove an applet without reloading itStack Overflow

版权声明：本文标题：java - Move an applet without reloading it - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745405660a2657238.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。