Question

我一直在阅读有关如何在HTML呈现后立即执行更改的详细信息。

我们应该说我们应该从页面上的所有iframe替换SRC。如果我在document_end中执行此操作，则首先加载原始SRC，然后当.js加载时，它会闪烁。

我希望iframe在开始时加载我的SRC，它会更加流畅。

我一直在关注webRequests，但无法让它发挥作用：http://developer.chrome.com/extensions/webRequest

我怎样才能让这样的事情发挥作用＆＃34;之前＆＃34;代码所以＆＃34;替换＆＃34;将要打印的HTML？

if ($('iframe').length){
    $('iframe').each(function( index ) {
        $(this).attr('src', 'http://www.google.com');
    }); 
}

Answer 1

试试Mutation Observers。我不确定它们是否会在iframe上触发，但从技术角度讲它们应该是因为DOM被操纵了。

Answer 2

TL; DR版本：您无法完全修改iframe ，但您可以在div中呈现修改后的网站。

好的，所以你根本无法修改iframe，但你可以在div中渲染一个网站。这是一个真正的hacky解决方案，但它完成了工作（我不会在代码中发布解决方案，而是告诉你如何做到这一点）

首先，用div替换iframe元素。该div将包含修改后的站点。

然后，您需要获取Google网站的内容。因为JavaScript有时会带有权限，所以我会建议两种解决方案来获取网站的内容。

使用PHP获取网站内容。在PHP中修改它也更容易！然后，您可以向PHP文件发出AJAX请求并获取修改后的内容。
仅使用JavaScript，您可以使用AJAX获取URL的内容。查看this topic

现在，由于您要修改某些HTML，因此您必须在整个内容中对任何标记进行递归搜索，然后替换它们。请记住，如果你粗暴搜索它，你最终会得到一个半工作的过滤器。

我假设Google在本地引用文件，例如logo.png，而不是http://www.google.com/logo.png。这意味着当它最终呈现时，你最终会在任何地方找到损坏的文件引用，并且这个网站看起来不像谷歌。要解决此问题，请使用仅针对文件引用和URL的过滤器搜索内容。检查网址是否为徽标，您可以通过检查网址是否包含http:// or https://来执行此操作。如果它不包含此内容，请添加http://www.google.com作为URL的前缀。这应该导致所有引用都被修复。

最后，要呈现内容，只需将其添加到“iframe”div。你应该给div一个宽度和高度，使它看起来更像iframe。

我希望这有帮助;）

Chrome扩展程序 - 在打印之前更改HTML

2 个答案: