Question

我目前正在使用jQuery load()第三方HTML文件，我将其注入到当前HTML页面的DIV中。

$("#external-page").load(URL, function() {
   injectDataInPage();
   doOtherStuffInPage();
});

这非常有效。主要问题是他们在HTML中添加了大量代码（即：发出服务器请求的按钮和从其他服务器加载的资源等）。

如果他们只为他们的请求使用了路径，那么就可以了，但不幸的是，他们指定了域名，有时还指定了IP地址。

我想替换所有硬编码域和IP地址以指向我自己的服务器。

例如，这些：

<a href='http://external.com/some/path/of/service'>Click here</a>

<img src='http://10.2.3.4/some/path/to/image.png'>

将重新映射到：

<a href='http://my.domain.com/some/path/of/service'>Click here</a>

<img src='http://my.domain.com/some/path/to/image.png'>

我知道您可以使用IIS插件或Node.js或其他东西来实现它，但是可以在客户端使用jQuery实际执行吗？一旦页面被添加到DOM或者可能在将其注入DIV之前。

Answer 1

加载完成后插入。

$('a[href]').each(function(){
    $(this).attr('href', $(this).attr('href').replace("http://external.com", "http://my.domain.com");
});

$('img[src]').each(function(){
    $(this).attr('src', $(this).attr('src').replace("http://10.2.3.4", "http://my.domain.com");
});

您可以在'a[href]'前添加一些div选择器：'.mydiv a[href]'，以防止观看所有元素。

Answer 2

你也可以找到像URI.js这样有用的东西。例如，您可以使用带有resource()函数的替换函数来使所有URL相对。

例如：

$("#external-page").load(URL, function() {
    injectDataInPage();

    $("#external-page img").each(function(i, img){
        var src = $(img).attr('src');
        $(img).attr('src', new URI(src).resource());
    }); 

    $("#external-page a:link").each(function(i, link){
        var href = $(link).attr('href');
        $(link).attr('href', new URI(href).resource());
    }); 

    doOtherStuffInPage();
});

当然，这是未经测试的，但这个想法应该是显而易见的。

使用jQuery

2 个答案: