如何加载由此JS代码操纵的外部HTML内容？

通过其他用户的帮助，我有以下JSFiddle查看表并删除不需要的列。如何加载由此JS代码操纵的外部HTML内容？

http://jsfiddle.net/9qme9/

我想这样做是加载HTML（这实际上是一个aspx文件）从外部文件，而不是操纵在同一页上的HTML - 这是上面的链接的情况。

我这样做离线/客户端，所以PHP是没有问题的，并且aspx文件不在我的页面相同的位置。

我是一个初学者，所以JSFiddle的例子将不胜感激。

非常感谢

来源

2012-07-08 redditor

请在发帖前仔细研究您的代码...像这样：http://jsfiddle.net/BramVanroy/9qme9/1/ – 2012-07-08 12:33:18

@BramVanroy感谢您的阅读，但是我将它作为链接安排在问题中的原因是因为该小提琴的HTML部分正是我从aspx文件得到的。也许我应该在问题中明确表达出来？ – redditor 2012-07-08 12:43:23

我会建议以下，其中包含以前的答案用于过滤列在将过滤的表格附加到页面之前，您不需要：

$(document).ready(function() { 

    //define which column headers to keep 
    $("#gvRealtime") 
     .load("http://fiddle.jshell.net/UqZjt/show/", function(response, status, xhr){ 
      var html = $(response), 
       table = html.find('#gvRealtime'), 
       headersToKeep = ['---', 'C6', 'C7', 'C13', 'C14'], 
       colsToKeep = [], 
       ths = table.find('th'); 

      $.each(headersToKeep, function(i, v) { 
       //finds each header and adds its index to the colsToKeep 
       colsToKeep.push(ths.filter(function() { 
        return $(this).text() == v; 
       }).index()); 
      }); 

      //makes a new jQuery object containing only the headers/cells not present in the colsToKeep 
      $('th, td', '#gvRealtime, #gvTotal').filter(function() { 
       return $.inArray($(this).index(), colsToKeep) == -1; 
      }).hide(); //and hides them 
     }); 

});

JS Fiddle demo。

来源

2012-07-08 13:15:26

这真是太好了，谢谢。我已将此复制到本地文件，但它似乎不能脱机工作 - 你会碰巧知道这是为什么吗？是否因为源HTML必须位于相同的目录？谢谢！ – redditor 2012-07-08 14:09:44

这可能是因为JavaScript的[相同来源策略]（http://en.wikipedia.org/wiki/Same_origin_policy），用于停止在另一个网站上调用脚本的网站上的脚本，以防止恶意脚本。如果两个页面都在你的本地主机上的同一个目录中，那么他们应该工作。 – 2012-07-08 14:21:57

感谢您的回复！我以前听说过这个 - 恐怕让他们在同一个目录下是不可能的。任何想法/解决方法？ – redditor 2012-07-08 14:34:22

可以使用

$("#elem").load("url.aspx");

其中#elem是要放的外部URL

检查此例如内容中的HTML元素的ID： http://jsfiddle.net/9qme9/5/

来源

2012-07-08 12:26:26 mfadel

感谢您的回应，是否有可能将您放入使用http://fiddle.jshell.net/UqZjt/show/ – redditor 2012-07-08 12:48:24

的源代码的新JSFiddle检查此URL http://jsfiddle.net/9qme9/2/ – mfadel 2012-07-08 12:52:55

此处更新版本：http://jsfiddle.net/9qme9/5/ – mfadel 2012-07-08 12:55:51

如何加载由此JS代码操纵的外部HTML内容？

回答

相关问题