Проверьте, поддерживает ли элемент юридически атрибут src или innerHTML - PullRequest
Новая
       1

Проверьте, поддерживает ли элемент юридически атрибут src или innerHTML

2 голосов
/ 03 января 2012

Есть ли способ проверить, может ли элемент отображать innerHTML или $.html() (например, элементы, у которых есть отдельный закрывающий тег) ИЛИ это элемент, который должен иметь атрибут src в соответствии со спецификацией HTMLтакие как <img>?Я ищу быстрый / надежный способ сделать это с помощью jQuery или собственного JavaScript.

Редактировать: В соответствии со спецификацией HTML элементы, не предназначенные для внутреннего содержимого, называются void elements , но есть и такие элементы <iframe src=url>inner</iframe>, которые полностью допустимы.

Ответы [ 3 ]

5 голосов
/ 03 января 2012

К сожалению, нет надежного способа сделать это, потому что в Javascript, любой элемент может иметь эти атрибуты.Кроме того, как это ни странно, почти все элементы HTML, включая <img>, имеют атрибут 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 голосов
/ 04 января 2012

Я нашел список элементов, которые (согласно спецификации) допускают атрибут src : 

 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(); 
}
2 голосов
/ 03 января 2012

Полагаю, вы могли бы сделать 

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

Не совсем надежно, поскольку любой элемент может добавить эти свойства (JSON).

(спасибо за исправление, вор)

...