如何验证URL中的内容(Javascript)

How to validate a content in URL (Javascript)

本文关键字：Javascript URL 验证 何验证      更新时间：2023-09-26

我在JSON提要中有URL，每个URL包含一个图像。我想验证那些有图像或不(NULL)的url。如何使用javascript验证这一点。因为我是初学者，我不知道，如何验证这一点。由于

      JSON feed with image n NULL
        {
         previewImage:"http://123.201.137.238:6060/feed/videoplay/Jackie.png",
        }, 
        {
        previewImage:"http://www.snovabits.net/feed/ImageMI/WarCraft.jpg",
        },

有趣的问题!

尝试添加图像到div(使用jQuery,div可以使用display:none;隐藏)。
然后定期测试图像的属性(使用setInterval循环)，看它们是否表明加载成功。定义一个超时时间，超过这个时间setInterval将终止自己。

此属性用于在Chrome和Firefox中测试成功加载img:

naturalHeight != 0

此属性适用于在IE7,8,9中测试成功加载img:

fileCreatedDate != ''

测试两者，使其在所有主流浏览器中都能工作。

下面是加载过程中道具如何在10ms的步骤中发生变化的示例。在不同的浏览器中尝试一下!:
http://jsfiddle.net/xGmdP/

在Chrome和FF中，您甚至可以通过检查所有图像的complete属性来替换setInterval循环的超时。但不幸的是，这在IE中不起作用(complete在IE中对于无法加载的图像总是保持false)。

最后这里是小提琴的完整代码:

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/JavaScript"></script>
  <script type="text/JavaScript">
    $(function(){
      $('#images').prepend('<img id="img1" src="http://123.201.137.238:6060/feed/videoplay/Jackie.png">')
      $('#images').prepend('<img id="img2" src="http://www.snovabits.net/feed/ImageMI/WarCraft.jpg">')
      setInterval(test, 10);
    })
    function test(){
      var props=['naturalHeight', 'complete', 'fileCreatedDate', 'clientHeight', 'offsetHeight', 'nameProp', 'sourceIndex'];
      for(i in props){
        var pr = props[i];
        $('#testresults').append('1:'+pr+' = ' + $('#img1').prop(pr)+'<br>');
        $('#testresults').append('2:'+pr+' = ' + $('#img2').prop(pr)+'<br>');
      }
      $('#testresults').append('---<br>');
    }
  </script>
</head>
<body>
  <div id="images"><div>
  <div id="testresults"></div>
</body>
</html>

如果你想检查字符串是否为空只是做if(previewImage == "") { /* image is null, do stuff */ }，但如果你想检查图像是否实际存在，我建议通过AJAX做一个GET请求，并检查HTTP响应，例如:(jQuery):

$.ajax({
    url: "http://123.201.137.238:6060/feed/videoplay/Jackie.png",
    cache: false,
    error: function(){
       alert("image doesn't exist!");
    }
});
如果可能的话，在服务器端做这个会"更好"。
相关文章：