当前位置：文江博客话题详情

检查元素是否合法支持 src 属性或innerHTML

发布于 2024-12-24 01:25:48 字数 421 浏览 2 评论 0 原文

有没有办法检查元素是否可以显示 innerHTML 或 $.html() （例如具有单独结束标记的 elems）或者是一个旨在根据 HTML 规范（例如）是否有一个 src 属性？我正在寻找快速/可靠的方法来通过 jQuery 或本机 JavaScript 来完成此操作。

编辑：根据 HTML 规范，未设计为具有内部内容的元素称为 void 元素，但也有一些像 inner 这样的元素是完全有效的。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

雨落□心尘 2024-12-31 01:25:48

不幸的是，没有一种万无一失的方法可以做到这一点，因为在 Javascript 中，任何元素都可以具有这些属性。
另外，看起来很奇怪，几乎所有 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>

Unfortunately, there isn't a foolproof way to do this because in Javascript, any element can have those attributes.
Also, as odd at it may seem, almost all HTML elements, including <img>, have an innerHTML attribute, even though it can't really use it!

Your best bet is to make a table that specifies what elements have what.

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

回复收藏 0 原文

小忆控 2024-12-31 01:25:48

我想你可以

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

不完全可靠，因为任何元素都可以添加这些属性（JSON）。

（感谢您的修复，小偷）

I suppose you could do

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

Not totally reliable since any element could add those properties (JSON).

(thanks for the typeof fix, thief)

回复收藏 0 原文

屌丝范 2024-12-31 01:25:48

我找到了元素列表（根据规范）允许 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(); 
}

I found the list of elements that (according to the spec) allow the src attribute:

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

So this works to check by name:

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
}

This works for getting the appropriate content:

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(); 
}

And this is even safer:

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

~没有更多了~

关于作者

鲸落

暂无简介

文章

25 人气

关注发私信

友情链接

文江博客

检查元素是否合法支持 src 属性或innerHTML

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

卷耳

佚名

℉服软

qq_2gSKZM

凉宸

gyhjy

友情链接

检查元素是否合法支持 src 属性或innerHTML

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

卷耳

佚名

℉服软

qq_2gSKZM

凉宸

gyhjy

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。