Question

想象一下，我的html包含很多项目：

<html><body>
    <img src=http://host.com/pic1.jpg>
    <img src=http://host.com/pic1.jpg>
    <img src=http://host.com/pic1.jpg>
</html></body>

网站所有者向页面添加了一些脚本，而没有进行其他修改：

<script>
  var some_super_function = ... // what can i put here?
  some_super_function('host.com','ghost.com');
</script>

在加载此html期间，host.com被替换为hgost.com，因此图像从另一台服务器加载，就好像网址：

<html><body>
<img src=http://ghost.com/pic1.jpg>
<img src=http://ghost.com/pic1.jpg>
<img src=http://ghost.com/pic1.jpg>
</html></body>

我猜选择$('img')并调整.attr()不是一个好主意，因为这可能仅在页面加载后才有效，我不希望浏览器完全引用host.com。 / p>

我猜angularJS正在做类似的事情，不是吗？

这可能吗？

感谢。

Answer 1

您可以使用角度ng-src和{{}}语法来绑定您的img域名：

＆＃13;

var superFn = function(){ $('img').attr('src','ghost');  }
superFn();

angular.module('myApp',[]).controller('myCtrl',myCtrl);

function myCtrl($scope){
	$scope.domain = "a3.mzstatic.com";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

 <img ng-src="http://{{domain}}/us/r30/Purple69/v4/d5/9e/6d/d59e6dfa-2176-7bc1-20a8-d3a1316c7bb8/icon100x100.png" > 
 <img ng-src="http://{{domain}}/us/r30/Purple69/v4/d5/9e/6d/d59e6dfa-2176-7bc1-20a8-d3a1316c7bb8/icon100x100.png" > 
 <img ng-src="http://{{domain}}/us/r30/Purple69/v4/d5/9e/6d/d59e6dfa-2176-7bc1-20a8-d3a1316c7bb8/icon100x100.png" >
 
 </div>

＆＃13;

Answer 2

我想我知道你需要什么。您需要定义一个基础，并对其进行操作以满足您的需求。喜欢：

 <script type="text/javascript">
      document.write("<base href='http://yourimageurl.com/' />");
 </script>

您必须在正文标记之前使用此代码。

如何设置图片网址？这样，您必须镜像文件名以使其工作。只有相对的网址才有效。

Answer 3

在firefox中测试：

<body>
  <script>
    document.write('<!--');
    var body = null;
    setTimeout(function() {
      body = document.body.innerHTML
      console.log(body)
    }, 0)
  </script>

现在，您可以从body变量中提取页面内容，随意使用它们，然后放入页面（例如jQuery('body').html(...)）。我不知道如果页面中有评论它是否会起作用。还有其他方法可以阻止页面加载。像document.write('<script>');这样的东西。我也在firefox中试过document.write('<style>');，也可以。

Answer 4

你可以使用CSS最初隐藏图像，等到文档准备就绪，然后更改图像并在JS中显示它们吗？

CSS

img {
    display: hide;
}

JS

$(document).ready( function() {
    // ... selecting $('img') and tuning .attr() as mentioned in question

    // Show the images
    $('img').show();
}

Answer 5

我猜angularJS正在做类似的事情，不是吗？

不，角度使用ng-src但是你需要更改html

这可能吗？

我不认为可以从客户端可靠地做而不改变html。一个问题是当文档加载时，浏览器会在浏览器命中图像src元素时立即获取图像，即使您可以在此之前执行脚本，因为文档未加载脚本无法访问该元素。

可能你可以启动window.setInterval函数来检查元素和更改源，但它仍然不是一个好方法。

Answer 6

如果我没记错，那是你的要求。

var some_super_function = function(old_host,new_host)
 {
	$('img').each( function() {
        var newSrc;
		newSrc = $(this).attr('src').replace(old_host, new_host);		
		$(this).attr('src',newSrc);
		console.log($(this).attr('src'));
	});	
 }

 some_super_function('host.com','ghost.com');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img src="http://host.com/pic1.jpg" alt="pic1"/><br/>
<img src="http://host.com/pic2.jpg" alt="pic2"/><br/>
<img src="http://host.com/pic3.jpg" alt="pic3"/><br/>

JsFiddle Demo

Answer 7

纯粹的Js 你可以这样做：

<!DOCTYPE html>
<html>
    <head>
        <script>
        some_super_function = function(orig, alt)
        {
            Array.prototype.forEach.call(document.querySelectorAll("img[src*='"+orig+"']"), function(img)
            {
                var src = img.src;
                var host = src.replace(/^(.*\/\/[^\/?#]*).*$/,"$1");
                img.src = "http://"+src.replace(host, alt);
            });
        }
        </script>
    </head>
    <body>
        <img id="ol" src="http://www.intertools.net/lib/media/img/selector.png">
        <img id="io" src="http://www.intertools.net/lib/media/img/selector.png">
        <script>
            // callable anywhere
            some_super_function("www.intertools.net", "en.intertools.net");
        </script>
    </body>
</html>

为避免缓存，您甚至可以使用（假设您使用的是html5）

<html manifest="manifest.appcache">

js挂钩浏览器中的html加载进程

7 个答案: