jquery - jQuery appendTo は IE で無効な引数を与えます

Question

http://code.google.com/p/swfobject/にある swfobject へのインターフェイスを作成しようとしています。ユーザーが Flash Player をインストールしていない場合に必要な代替コンテンツを構築しています。これは FF では問題なく動作しますが、何らかの理由で IE では動作しません。私はこれを何百万回も前に同じ方法で実行しましたが、常に機能していましたが、今回このエラーが発生する理由がわかりません。

基本的に、ページが読み込まれると、代替コンテンツを構築する関数 $.SWFObject.embedSWF() が呼び出され、swfobject.embedSWF 関数が呼び出されます。代替コンテンツは、次のような Ready 関数で構築されます。

setupAlternateContent 関数が呼び出されると、('#' + containerID) でエラーが発生します。

embedSWF: function(flashFilename, containerID, width, height, minFlashVersion, flashvars, params, attributes) {
   //If the flashvars, params, or attributes variables were passed in and are objects, then save them, otherwise they will be empty.
   settings.flashvars = (flashvars && typeof(flashvars) == 'object') ? flashvars : {};
   settings.params = (params && typeof(params) == 'object') ? params : {};
   settings.attributes = (attributes && typeof(attributes) == 'object') ? attributes : {};

   //Setup the alternate content that will be used if the user does not have flash installed
   $(document).ready(function() { setupAlternateContent(containerID); });

   //Call the embedSWF function which is found in the swfobject core file
   swfobject.embedSWF(flashFilename, containerID, width, height, minFlashVersion, flashUpdater, settings.flashvars, settings.params, settings.attributes);
}

function setupAlternateContent(containerID) {
    //Create the innerContainer div element
    var innerContainer = $.create('div', {
    }).appendTo('#' + containerID).css({
        font: '18px Arial, Verdana, sans-serif',
        height: '130px',
        width: '240px',
        paddingTop: '35px',
        margin: '0px auto'
    });

    //Put the flash image inside the innerContainer
    $.create('img', {
        src: SWFOBJECT_FOLDER_LOCATION + 'flash_icon.png',
        alt: 'Install Flash'
    }).appendTo(innerContainer).css({cursor: 'pointer'}).click(function() { window.location = 'http://get.adobe.com/flashplayer'; });

    //Add a message bellow the flash icon
    $.create('p', {}, 'Install Adobe Flash Player').appendTo(innerContainer);
}

IE は ('#' + containerID) 引数が好きではありません。これは以前に問題なく実行したため、意味がありません。また、 $.create の由来である jQuery DOMEC 拡張機能を使用しています。

どんな助けでも大歓迎です。ありがとう！

大都市

score 1 · Accepted Answer

アプローチを再考する必要があるかもしれません。Flash Player が利用できないときに JS で生成された代替コンテンツを表示する必要がある場合は、代替コンテンツを作成する前にswfobject.hasFlashPlayerVersion("9")確認することをお勧めします。このチェックは、DOM がロードされる前に実行できます。

swfobject.embedSWF は独自の domready スタイルのイベントでラップされているため、jQuery の $(document).ready イベントでラップする必要がないことに注意してください。

簡単な例:

var hasFlash = swfobject.hasFlashPlayerVersion("9");
if(hasFlash){
   swfobject.embedSWF( ... ); 
} else {
   //Create alt content right away (no need to wait for dom to load)
   var altcontent = setupAlternateContent();
   //When DOM is ready, append alt content to page
   $(document).ready(function () { altcontent.appendTo("mycontainer") });
}

このアプローチにより処理速度が向上し (DOM の読み込みを待って何をする必要があるかを判断する必要がなくなります)、必要がない場合は代替コンテンツが生成されなくなります。

このロジックに従って、コードを次のようにリファクタリングします (入力ミスはご容赦ください)。

embedSWF: function(flashFilename, containerID, width, height, minFlashVersion, flashvars, params, attributes) {

   if(swfobject.hasFlashPlayerVersion(minFlashVersion)){

      //If the flashvars, params, or attributes variables were passed in and are objects, then save them, otherwise they will be empty.
      settings.flashvars = (flashvars && typeof(flashvars) == 'object') ? flashvars : {};
      settings.params = (params && typeof(params) == 'object') ? params : {};
      settings.attributes = (attributes && typeof(attributes) == 'object') ? attributes : {};

      //Call the embedSWF function which is found in the swfobject core file
      swfobject.embedSWF(flashFilename, containerID, width, height, minFlashVersion, flashUpdater, settings.flashvars, settings.params, settings.attributes);

    } else {

       //Create alt content right away (no need to wait for dom to load)
       var altcontent = setupAlternateContent();

       //When DOM is ready, append alt content to page
       $(document).ready(function() { altContent.appendTo(containerID); });

    }

    function setupAlternateContent(containerID) {

        //Create the innerContainer div element
        var innerContainer = $.create('div').css({
            font: '18px Arial, Verdana, sans-serif',
            height: '130px',
            width: '240px',
            paddingTop: '35px',
            margin: '0px auto'
        });

        //Put the flash image inside the innerContainer
        $.create('img', {
            src: SWFOBJECT_FOLDER_LOCATION + 'flash_icon.png',
            alt: 'Install Flash'
        }).appendTo(innerContainer).css({cursor: 'pointer'}).click(function() { window.location = 'http://get.adobe.com/flashplayer'; });

        //Add a message bellow the flash icon
        $.create('p', {}, 'Install Adobe Flash Player').appendTo(innerContainer);

        return innerContainer;

    }

score 1 · Accepted Answer

他のブラウザーではなく、IE でのみ同じエラーが発生しました。.html() を .replaceWith() に置き換えたところ、うまくいきました。.replaceWith を使用すると、DIV 全体が置き換えられます。そのため、置き換えるコンテンツに div をもう一度追加して、失われないようにします。

例：このようなことをしようとしている場合。

$(#testDIV).replaceWith(testData);

次に、「testData」がこの形式であることを確認してください。

<div id='testDiv'>
This is new content.
</div>

このように、replaceWith を使用しても、DIV が失われることはありません。

score 0 · Accepted Answer

ドキュメントレディハンドラーで、という変数を使用してsetupAlternateContentを呼び出しているようですcontainerID-この変数はどこかで定義されていますか？そうでない場合は、関数内で実行しますがappendTo('#')、エラーが発生しても驚かないでしょう。コンテナのIDは何ですか？ドキュメントの準備が整う前にどこに設定されますか？

alert(containerId)内部を試して、setupAlternateContent自分が思っていることを関数に渡していることを確認できます...

（新しい情報を追加した後の編集）

$ .createメソッドが機能するかどうかはわかりませんが、DOM作成に組み込まれたjQueryを使用してみることができる場合：var innerContainer = $('<div />').appendTo(....または：

var innerContainer = $('<div />').css({
    font: '18px Arial, Verdana, sans-serif',
    height: '130px',
    width: '240px',
    paddingTop: '35px',
    margin: '0px auto'
});
$('#' + containerID).append(innerContainer);

または一度に：

$('#' + containerID).append(
    $('<div />').css({
        font: '18px Arial, Verdana, sans-serif',
        height: '130px',
        width: '240px',
        paddingTop: '35px',
        margin: '0px auto'
    }),
    $('<img />').attr({
        src: SWFOBJECT_FOLDER_LOCATION + 'flash_icon.png',
        alt: 'Install Flash'
    }).css({
        cursor: 'pointer'
    }).click(
        function() { 
            window.location = 'http://get.adobe.com/flashplayer'; 
        }
    )
);

jquery - jQuery appendTo は IE で無効な引数を与えます

3 に答える 3

Related

Reference