jQuery html（$（“ <img> ”）.attr（“ src”，this.href））; 在Safari中无法使用

Question

我正在为图片库使用简单的jquery函数。 单击缩略图后有一个div，然后单击缩略图后将大图像加载到其中的目标div。

它在所有浏览器中都能正常工作，但Safari除外，在Safari中，加载图片的绝对URL而不是在div中加载。

这是jQuery代码：

$("#thumbnails a").click(function() {
    $("#work").html($("<img>").attr("src", this.href));

    return false;
});

有什么想法吗？ 谢谢

Answer 1

this.href不安全！

使用$(this).attr('href') ，它将起作用。

在这里查看我的问题： 检索HTML属性值“ DOM 0方式”

它解释说，有几个有问题的HTML属性（其中的href ），因此应使用jQuery的attr()来检索其值。

引用该页面上的答案：

例如，元素的href属性始终报告完全限定的URL，而getAttribute（“ href”）将逐字返回HTML href属性中指定的字符串。 当然，除了IE中。 jQuery的attr（）确实试图规范这种不一致。

---

更新

我想到了。 您没有确保在DOM准备好后即可运行jQuery代码。 始终将所有jQuery代码放在ready处理程序中：

$(function() {

    // place all jQuery code here

});

---

更新2

试试这个代码：

$('#thumbnails a').click(function() {
    $('#work').empty().html( '<img src="' + $(this).attr('href') + '">' );
    return false;       
});

我应该早点看过。 html（）函数的参数必须为字符串。

---

更新3

可能是Safari（至少）没有执行页面上完全通过jQuery的load（）方法加载的JavaScript代码。

但是，我认为我想出了应对方法！

在1776.php页面上，将SCRIPT元素从HEAD移到文档的BODY。

<body>
    <script> ... the code ... </script>
    <div> ... </div>
</body>

Answer 2

$("#thumbnails a").click(function() {
      $('#work').empty().append($('<img>', {
           src:   this.href
      }));
      return false;
});

Answer 3

我对this.href感到困惑，因为当您在属性$("#work") 。

尝试这个：

$("#thumbnails a").click(function() {
    var urlHref = $(this).attr('href');
    $("#work").html($("<img>").attr("src", urlHref));
    return false;
});

Answer 4

仅在Safari Mobile中通过javascript附加图像时，请使用css属性background:url(...)代替<img>标记。 它不能与<img>标签一起使用。