无法在 jQuery 中为“对象”标签设置“数据”属性。 [仅限 IE8]答案

【问题标题】：Unable to set 'data' attribute for 'Object' tag in jQuery. [IE8 only]无法在 jQuery 中为“对象”标签设置“数据”属性。 [仅限 IE8]
【发布时间】：2014-01-01 20:55:33
【问题描述】：

我在 jQuery 中动态创建一个对象元素，以呈现一些内容。它适用于除 IE8 以外的所有浏览器。

代码：

    j$(document).ready(function(){ 
        j$('.objContainer').html(j$('<object>').attr(
                            {'data':'http://www.stackoverflow.com',
                             'type':'text/html'}));
    });

执行后创建的 HTML 结构（在 IE8 中）：

    <object type="text/html"></object>

在其他浏览器[IE9、Firefox、Chrome]：

    <object data="http://www.stackoverflow.com" type="text/html"></object>

有什么解决办法吗？

【问题讨论】：

我怀疑这是由于 IE8 中的同源策略限制。来自MSDN：在 IE9 标准模式下，允许对象元素从其他域加载内容。但是，在 IE8 标准模式下，这是不允许的。
只是一个猜测，但它是否与 stackoverflow.com 使用 X-Frame-Options 来防止嵌入以及 IE 对此做出奇怪的反应有关？尝试嵌入example.iana.org

标签： javascript jquery html internet-explorer internet-explorer-8

【解决方案1】：

为我工作：使用 IE8 开发人员工具，我可以看到数据属性。这是screenshot。

（我知道我不应该这么说，但是：您需要确保您允许脚本运行。）

【讨论】：

你是对的。实际代码中存在愚蠢的拼写错误。谢谢你:)

【解决方案2】：

如您所见here，IE 不支持数据（数据集）。
您可以做的是 rename data 到 data-foo 和then $(..).data("foo") 将工作即使在 IE 中，因为 jquery 本身的特殊处理。
这是一种绕过IE的数据集限制的方法。

【讨论】：

【解决方案3】：

它应该可以正常工作，虽然我建议你使用 $.data() 方法

http://api.jquery.com/jQuery.data/

更加安全，jQuery 确保在通过 jQuery 方法移除 DOM 元素时，数据也被移除。

例子：

<object id='myObj' data-url="http://www.stackoverflow.com" type="text/html"></object>

您可以读取如下值：

var url = $('#myObj').data('url');// Read the value
$('#myObj').data('url', 'some-other-value');// Set a new value

【讨论】：

.data() 不会将信息放在 DOM 中（即，它不会设置 data 属性）。