将 Javascript 代码注入 web 页面
[英]Inject Javascript code into a web page
问题描述
I'd like to download web page as html file.
我想将 web 页面下载为 html 文件。 Before I save the web page source code in html file, I'd like to edit some of the page content first.在将 web 页面源代码保存到 html 文件之前，我想先编辑一些页面内容。 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.我假设我可以使用 Javascript 编辑内容。不幸的是我对 Javascript 没有什么经验。我想我必须将我的脚本注入 web 页面以便浏览器可以一起执行它们。 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?我应该编写一个独立的脚本并将页面 url 传递给我的脚本以便它们可以同时执行吗？ Or there are other ways to inject my script?或者还有其他方法可以注入我的脚本？
EDIT: To make my problem clear, see this post and this post编辑：为了弄清楚我的问题，请参阅这篇文章和这篇文章
3 个解决方案
解决方案1
2 已采纳 2013-01-11 06:57:55
As you are only doing this once, starting your script from the browsers JavaScript console should be enough. 由于您只是这样做一次，从浏览器JavaScript控制台启动脚本就足够了。 Open the developer tools, navigate to the console tab, paste your script content, and press enter. 打开开发人员工具，导航到控制台选项卡，粘贴脚本内容，然后按Enter键。
To get the edited HTML, evaluate the expression document.documentElement.outerHTML in the console. 要获取已编辑的HTML，请在控制台中评估表达式document.documentElement.outerHTML 。 Copy the output to a text editor of your choice, prepend it with a doctype, and save it as html. 将输出复制到您选择的文本编辑器，前面加上doctype，并将其另存为html。
解决方案2
1 2013-01-11 08:01:07
If you want to save modified source as html you can use different aproaches, depends on what you want to mainupulate. 如果你想将修改后的源码保存为html，你可以使用不同的aproaches，取决于你想要主要的。 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. 遗憾的是，使用javascript保存文件很棘手并且取决于很多东西，因此您可以使用选项手动复制粘贴文件源或编写浏览器和设置特定的文件保护程序。 I would prefer javascript+php combo solution. 我更喜欢javascript + php组合解决方案。 Or if there is no need to manipulate someting with javascript i would do it entirely in php. 或者，如果没有必要用javascript操纵某些东西，我会完全在php中完成它。
Step 1 - open browser with console, in chrome and firefox CTRL+SHIFT+J And allow popups. 第1步 - 使用控制台打开浏览器，使用chrome和firefox CTRL + SHIFT + J并允许弹出窗口。 Step 2 - open webpage you want Step 3 - Copy next code to console 第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步 - 从打开的窗口textarea复制粘贴代码
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页面并操纵内容并根据需要保存文件。
解决方案3
-1 2022-02-12 04:47:07
You can use a browser extension like Requestly to Inject custom Javascript/CSS on web pages .您可以使用像Requestly这样的浏览器扩展在 web 页面上注入自定义 Javascript/CSS 。
This is how you can do it.这就是您可以做到的。
- Download Requestly and Open Rules Page请求下载并打开规则页面
- Create New Rule and Select Insert Custom Script/CSS Rule Type创建新规则并 Select 插入自定义脚本/CSS 规则类型
- Enter your domain (or Page URL Pattern) and define your Script输入您的域（或页面 URL 模式）并定义您的脚本
Screenshot - Insert Script Rule屏幕截图 - 插入脚本规则
If you are looking for a Cross-Browser solution then you can use Requestly Desktop App and Configure your rule similarly.如果您正在寻找跨浏览器解决方案，那么您可以使用Requestly Desktop App并类似地配置您的规则。
In your particular case, you can choose an option like to run the script after page load so that all DOM Elements are present on the page before you modify/annotate them.在您的特定情况下，您可以选择一个选项，例如在页面加载后运行脚本，以便所有 DOM 元素在您修改/注释它们之前都出现在页面上。
Disclaimer - I built Requestly免责声明 - 我按要求建造
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.