2012-01-03 10 views
2

要素がinnerHTMLまたは$.html()(別の終了タグを持つelemsのような)を表示できるかどうかをチェックする方法はありますかORはsrc属性<img>などのHTML仕様に変更しますか?私はjQueryまたはネイティブJavaScriptを介してこれを行うための高速/信頼性の高い方法を探しています。要素がsrc属性またはinnerHTMLを合法的にサポートしているかどうかをチェック

編集:は、HTMLの仕様によると、内側のコンテンツを持つように設計されていない要素がvoid elementsと呼ばれていますが、完全に有効です。この<iframe src=url>inner</iframe>ような要素もあります。

+3

'src'属性は' innerHTML'と何が関係していますか? –

+1

何でも 'src'属性を持つことができます。また、 'innerHTML'プロパティは期待通りにできません。 –

+0

@DarinDimitrov質問のタイトルは、実際に質問されている質問と一致していないようですが、何もありません。 –

答えて

5

は残念ながら、JavaScriptで、任意の要素がそれらの属性を持つことができ、これを行うために絶対確実な方法はありません。 また、奇妙なことに、<img>を含むほぼすべてのHTML要素にはinnerHTML属性がありますが、実際には使用できません。

あなたの最善の策は、どの要素に何があるかを指定する表を作ることです。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 

     <style> 
      </style> 

    </head> 
    <body> 

     <div id="anElementWithInnerHTML"></div> 
     <img id="anElementWithInnerSRC" /> 

     <script> 

      var div = document.getElementById("anElementWithInnerHTML"); 
      console.log(div.innerHTML); //Outputs "" 
      console.log(div.src);  //Outputs undefined 

      var img = document.getElementById("anElementWithInnerSRC"); 
      console.log(img.innerHTML); //Outputs "" (weird right?) 
      console.log(img.src);  //Outputs "" 

      </script> 

    </body> 
</html> 
2

私は、任意の要素はこれらのプロパティ(JSON)を追加することができますので、あなたが

if (typeof element.src !== 'undefined') 
if (element.innerHTML ...) 

ない完全に信頼性の高い操作を行う可能性があるとします。

(typeof演算の修正のためのおかげで、泥棒)

+1

'element.src!== undefined'または' typeof element.src!== 'undefined' ' - ただし、プロパティ自体を文字列' 'undefined''と比較することはできません! – ThiefMaster

2

私はlist of elements that (according to the spec) allow the src attributeが見つかりました:

audio, embed, iframe, img, input, script, source, track, video 

だから、これは名前でチェックするために動作します。これは、適切なコンテンツを取得するため

function srcAllowed(tag) { 
    if (!tag) { return false; } 
    var tags = ['audio','embed','iframe','img','input','script','source','track','video']; 
    return 0 <= $.inArray(tag.toLowerCase(), tags); // boolean 
} 

作品:

function getContent(elem) { 
    // @param elem is a selected element like $(this) 
    // returns empty string if attr() and html() are both are falsey 
    return elem.attr('src') || elem.html(); 
} 

そして、これはさらに安全です:

function getContentSafer(elem) { 
    // @param elem is a selected element like $(this) 
    // returns empty string if attr() and html() are both are falsey 
    return srcAllowed(elem.prop('tagName')) ? (elem.attr('src') || elem.html()) : elem.html(); 
} 
+0

あなたが望むように働くことができてうれしいです。あなたのソリューションを投稿していただきありがとうございます! –

+0

@ジェフリースウィーニー確かに、ありがとう! – ryanve

関連する問題