7

アプレットをリロードせずに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>

このフィドルで答えを試すことができます

@goldenparrot によって提案されたソリューションは機能しouterHTMLますが、すべてのブラウザー (少なくとも Firefox ESR) では機能しません。

@kritzikratzi の回答と @biziclop の回答に記載されているように、Firefox の iframe、フラッシュ オブジェクト、プラグインのリロードに関する既知の問題があります。

唯一の解決策は、絶対配置 (@cuzzea) を使用することだと思います (しかし、よくわかりません)。ただし、別の方法を見つけたかったので、この質問をしました（「絶対配置を使用したくない」）。これが、私が回答を与えない理由です。

貢献していただきありがとうございます。

4

4 に答える 4

3

あなたが探していることが可能だとは思いませんが、ポジショニングを使用したい場合は、これを試すことができます:

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> 
​&lt;/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 にしましたが、次のように動的にすることもできます。

var width = el.width()

また

var width = el.children('applet').attr('width');
于 2012-09-16T18:59:30.580 に答える
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];

}

重要：まず、appletタグも閉じる必要があります。私は次のように意味します：<applet></applet>

また重要：

ソリューションについて知っておくべきことがいくつかあります。

  1. このソリューションは、初めて機能するだけです。つまり、div1またはdiv2に移動できます。
  2. 2つのボタンまたは1つのボタンを複数回クリックすると、HTMLが壊れます。
  3. 単語（ && ）を単語（ && ）にtoDiv2()置き換えて関数を作成する必要があります。Div1div1toDiv1()Div2div2

最善の解決策ではない場合でも、これを投稿しています。正しい方向に進んでいれば、複数回のクリックでも機能させる方法を理解できると思います。そして、あなたはこの答えを見た後、そうあるべきです。

編集：

ソリューションが実行しようとする基本的なことは次のとおりです。

appendChildは、新しい要素を作成して追加します。そして、新しい要素が作成された場合、それはあなたが望むものではありません。

externalHTMLは、変更可能なHTMLElementのプロパティです。externalHTMLのデモンストレーションについては、このフィドルがどのように機能するかを参照してください。

于 2012-09-10T09:23:27.373 に答える
1

「単に運が悪い」の場合かもしれませんが、少しグーグルで検索すると、関連するように聞こえる多くのブラウザのバグがあることがわかります。

リロードせずに dom で iframe を移動することはできません:

DOM でプラグインを移動できません

あなたのベストショットは、element.adoptNode(...) と既に述べた outerHtml で遊んでいるかもしれません。幸運を ：）

(テストしたいのですが、OS xi のすべての Java 混乱のために、Java プラグイン atm を実行することさえできません)

于 2012-09-12T03:40:23.253 に答える
1

IE8で以下を試しました

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

これにより、アプレットが停止、破棄、初期化され、再び開始されます。これは、outerHTML が機能しないことを示しているようです。また、Firefox 13 の outerHTML は、返される最初の文字として改行を配置します。これを使用して、outerHTML によって返されるコンテンツを検索する場合は注意してください。

また、gontard による元の投稿は Firefox 13 で動作するようです (outerHTML やその他のトリックを使用せずに)

于 2013-01-04T14:51:05.593 に答える