无法在jQuery中为“Object”标记设置“data”属性[仅限IE8]

Question

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

代码：

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

执行后在IE8中创建的HTML结构如下：

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

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

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

有什么解决方案吗？

- ipradhansk

---

我怀疑这是由于IE8中的同源策略限制所致。来自MSDN的说明：在IE9标准模式下，允许对象元素从其他域加载内容。然而，在IE8标准模式下，不允许这样做。 - bfavaretto

只是猜测，可能与stackoverflow.com使用X-Frame-Options来防止嵌入有关，而IE对此反应奇怪？尝试嵌入http://example.iana.org/。 - Dagg Nabbit

Answer 1

对我来说可行：使用IE8开发者工具，我可以看到数据属性。这是一个截图。

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

- jdigital

---

你是对的。实际代码中有一个愚蠢的拼写错误。谢谢 :) - ipradhansk

Answer 2

它应该可以正常工作，但我建议您使用$.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

- Ahmed El Kilani

---

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

Answer 3

正如您在这里所看到的，数据集（dataset）不被IE支持。
您可以将data重命名为data-foo，然后使用$(..).data("foo")即可在IE中使用，因为jquery本身进行了特殊处理。
这是绕过IE对数据集限制的一种方法。

- user1299518