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

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完全没有。

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

这可能吗？

谢谢。

Answer 1

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

var superFn = function(){ $('img').attr('src','ghost');  }
superFn();

angular.module('myApp',[]).controller('myCtrl',myCtrl);

function myCtrl($scope){
 $scope.domain = "a3.mzstatic.com";
}

<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>

Answer 2

I guess angularJS is doing something like that, isn't it?

不，angular 使用 ng-src 但为此您需要更改 html

Is this possible?

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

也许您可以启动一个 window.setInterval 函数来检查元素和更改源，但这仍然不是一个好的方法。

Answer 3

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

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

您必须在 body 标签之前使用此代码。

如何设置图像 urls？这样你必须镜像文件名才能使其工作。只有相对 url 的才有效。

Answer 4

在 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 5

能不能先用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 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(/^(.*\/\/[^\/?#]*).*$/,"");
                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 在浏览器中加载进程

js hook on html load process in browser

html

javascript

hook

angularjs