为什么JSFiddle以不同的方式渲染我的代码？

-1

我一直在JSFiddle中的一段代码。代码完全按照JSFiddle的预期显示，但在我自己的HTML文件中使用它时不会按预期方式显示。为什么JSFiddle以不同的方式渲染我的代码？

两者之间的差异通常会很快且很容易被发现，但据我所知这两个代码实际上是完全相同的（除了所需的新增$(window).load(function(){之外）。

$('.expose').ready(function(e){ 
     $('.expose').css('z-index','99999'); 
     $('#overlay').fadeIn(300); 
    }); 

    $('#overlay').click(function(e){ 
     $('#overlay').fadeOut(300, function(){ 
      $('.expose').css('z-index','1'); 
     }); 
    });

我的实现：

https://serallo.co.uk/highlight.php

我害怕一个非常明显的错误，但我根本无法理解我错过了什么。

来源

2016-11-22 Syn

如果您检查您的网站控制台，你会看到：

页的“https://americanfizz.co.uk/dev/highlight.php”装载了HTTPS，但要求一个不安全的脚本“http://code.jquery.com/jquery-1.5.2.js”。此请求已被阻止;内容必须通过HTTPS提供。

的问题是，因为你的URL使用https://，然而CDN链接到您的用途http://，因此它的阻挡并不加载jQuery的。您需要使用带有SSL URL的CDN。

另请注意，jQuery 1.5.2是非常过期。您应该升级到至少1.12。这里有一个CDN链接，应该为你工作：

https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js

使用jQuery load()的为事件处理这个新版本已被弃用。您需要将代码更改为$(window).on('load', fn)。

来源

2016-11-22 10:12:58

谢谢。我知道它会是这样的！这就是独自一人在咖啡上漫长的夜晚对你的影响！ – Syn

没问题，很乐意帮忙。还要注意，在'.expose'元素上使用'ready（）'方法是多余的，可以删除：jsfiddle.net/kwuo5bra/1 –

-1

因为您在元素准备就绪之前运行代码。在结束body标记之前移动您的JS代码。

来源

2016-11-22 10:13:02 n1kkou

而你在''''''''' .expose'元素。 – n1kkou

OP在'$（window）.load（）'下运行他的代码，这是完全有效的。问题是URL协议不匹配，与JS逻辑无关 –

确实如此，但他在元素本身上使用'ready'，而不是将整个代码从jQuery包装到文档'.ready'状态中并且摆脱了vanilla js'加载'状态。 – n1kkou

您需要在您的网页上添加jQuery，像https一样。你也使用旧版本。

如果你有这样的：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>

替换本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

此外，在你的代码中，揭露（）不给init元素的好办法。改为使用(document).ready。

$(document).ready(function(){ 

    $('.expose').css('z-index','99999'); 
    $('#overlay').fadeIn(300); 

    $('#overlay').click(function(e){ 
     $('#overlay').fadeOut(300, function(){ 
      $('.expose').css('z-index','1'); 
     }); 
    }); 
});

来源

2016-11-22 10:15:33

为什么JSFiddle以不同的方式渲染我的代码？

回答

相关问题