将 Javascript 代码注入网页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14273116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inject Javascript code into a web page
提问by Terry Li
I'd like to download web page as html file. Before I save the web page source code in html file, I'd like to edit some of the page content first. I assume I can edit the content using Javascript. Unfortunately I have little experience with Javascript. I guess I have to inject my script into the web page so that the browser can execute them together. How should I write my script? Should I write a standalone script and pass the page url to my script so that they can be executed at the same time? Or there are other ways to inject my script?
我想将网页下载为 html 文件。在我将网页源代码保存在 html 文件中之前，我想先编辑一些页面内容。我假设我可以使用 Javascript 编辑内容。不幸的是，我对 Javascript 的经验很少。我想我必须将我的脚本注入到网页中，以便浏览器可以一起执行它们。我应该如何写我的脚本？我应该编写一个独立的脚本并将页面 url 传递给我的脚本，以便它们可以同时执行吗？或者还有其他方法可以注入我的脚本？
回答by Bergi
As you are only doing this once, starting your script from the browsers JavaScript console should be enough. Open the developer tools, navigate to the console tab, paste your script content, and press enter.
由于您只执行一次，因此从浏览器 JavaScript 控制台启动脚本就足够了。打开开发人员工具，导航到控制台选项卡，粘贴您的脚本内容，然后按 Enter。
To get the edited HTML, evaluate the expression document.documentElement.outerHTMLin the console. Copy the output to a text editor of your choice, prepend it with a doctype, and save it as html.
要获取编辑的 HTML，请document.documentElement.outerHTML在控制台中评估表达式。将输出复制到您选择的文本编辑器，在其前面加上 doctype，并将其另存为 html。
回答by Aivar
If you want to save modified source as html you can use different aproaches, depends on what you want to mainupulate. Sadly with javascript saveing file is tricky and depends on many things, so you could use option to copy paste file source manually or write your browser and settings specific file saver. I would prefer javascript+php combo solution. Or if there is no need to manipulate someting with javascript i would do it entirely in php.
如果您想将修改后的源代码保存为 html，您可以使用不同的方法，这取决于您想要主宰的内容。遗憾的是，使用 javascript 保存文件很棘手并且取决于很多事情，因此您可以使用选项手动复制粘贴文件源或编写浏览器和设置特定的文件保护程序。我更喜欢 javascript+php 组合解决方案。或者，如果不需要使用 javascript 操作某些内容，我会完全在 php 中完成。
Step 1 - open browser with console, in chrome and firefox CTRL+SHIFT+J And allow popups. Step 2 - open webpage you want Step 3 - Copy next code to console
第 1 步 - 在 chrome 和 firefox 中使用控制台打开浏览器 CTRL+SHIFT+J 并允许弹出窗口。第 2 步 - 打开您想要的网页第 3 步 - 将下一个代码复制到控制台
//Script loading function
function load_script( source ) {
var new_script = document.createElement('script');
new_script.type = 'text/javascript';
new_script.src = source;
new_script.className = 'MyInjectedScript';
document.getElementsByTagName('head')[0].appendChild(new_script);
}
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
//Load jQuery, if page do not have it by default
if (typeof(jQuery) != 'function') load_script('http://code.jquery.com/jquery-latest.js');
Step 4 - Do your manipulations in console
第 4 步 - 在控制台中进行操作
Step 5 - Copy next code to console
第 5 步 - 将下一个代码复制到控制台
//In the end remove your injected scripts
$('.MyInjectedScript').remove(); //Or jquery script will be in source
//get Document source
var doc_source = $('html',document).html();
doc_source = '<html>'+doc_source+'</html>';
var new_window = window.open('', '', 'scrollbars=yes,resizable=yes,location=yes,status=yes');
$(new_window.document.body).html('<textarea id="MySource">'+escapeHtml(doc_source)+'</textarea>');
STEP 6 - copy paste code from opened window textarea
步骤 6 - 从打开的窗口文本区域复制粘贴代码
If you want to do it with PHP you can easily download page with curl and manipulate content and save file as desired.
如果你想用 PHP 来做，你可以很容易地下载带有 curl 的页面并操作内容并根据需要保存文件。
