我正在尝试创建一个 Firefox 插件(使用插件 SDK)来修改页面的显示方式，主要作为培训/学习练习。
对于某些任务(例如使用新功能扩充页面)使用 pageMod完全没问题。页面加载，我运行一些 JS 来显示/隐藏/添加元素。
我的问题是:我可以在页面开始显示之前对 DOM(即服务器返回的 HTML 文档)进行修改吗？
例如:从服务器返回的页面是:
<html>
<body>
<table>
<tr>
<td>Item 1.1</td>
<td>Item 1.2</td>
<td>Item 1.3</td>
</tr>
<tr>
<td>Item 2.1</td>
<td>Item 2.2</td>
<td>Item 2.3</td>
</tr>
</table>
</body>
</html>
但我希望 FF 渲染:
<html>
<body>
<ul>
<li>Item 1.1, Item 1.2, Item 1.3</li>
<li>Item 2.1, Item 2.2, Item 2.3</li>
</ul>
</body>
</html>
在页面加载后执行此操作将首先显示表格，然后它会快速“闪烁”到列表中。它可能足够快，但如果我要更改 <img>标记为 <a> ，例如防止(不需要的)图像加载，这是不够的。
我正在考虑使用 contentScriptWhen: "start"在 pageMod 中并尝试附加监听器，但我只是看不出如何“即时”修改 DOM(或者事件阻止在所有页面加载之前显示任何类型的页面)。
我检查过 cloud-to-butt扩展，因为它确实会即时修改页面，但我什至无法让它工作:当作为 pageMod 附加到 start 上时代码失败于:
document.getElementById('appcontent').addEventListener('DOMContentLoaded', function(e)
因为document.getElementById('appcontent')正在返回 null。
我将非常感谢一些指点:是否可能，如何附加脚本，如何拦截 HTML 并在进行一些修改后将其发送回原路。
编辑: 好的，所以我认为我能够拦截数据:
let { Ci,Cr,CC } = require('chrome');
let { on } = require('sdk/system/events');
let { newURI } = require('sdk/url/utils');
let ScriptableInputStream = CC("@mozilla.org/scriptableinputstream;1", "nsIScriptableInputStream", "init");
on('http-on-examine-response', function (event) {
var httpChannel = event.subject.QueryInterface(Ci.nsIHttpChannel);
var traceChannel = event.subject.QueryInterface(Ci.nsITraceableChannel);
if (/example.com/.test(event.subject.URI.spec)) {
traceChannel.setNewListener(new MyListener());
}
}, true);
function MyListener(downloader) {
this.data = "";
}
MyListener.prototype = {
onStartRequest: function(request, ctx) {
this.data = [];
},
onDataAvailable : function(request, context, inputStream, offset, count) {
var scriptStream = new ScriptableInputStream(inputStream);
this.data.push(scriptStream.read(count));
scriptStream.close();
},
onStopRequest: function(request, ctx, status) {
console.log(this.data.join(''));
}
}
现在 onStopRequest我想对数据做一些事情并将其输出回原来的位置...
请注意，这适用于字符串而不是 DOM，因此它并不完美，但它是一个开始的地方 :)
编辑2:
嗯，我让它工作了，虽然我觉得我真的不应该那样做:
onStopRequest: function(request, ctx, status) {
//var newPage = this.data.join('');
var newPage = "<html><body><h1>TEST!</h1></body></html>";
var stream = converter.convertToInputStream(newPage);
var count = {};
converter.convertToByteArray(newPage, count);
this.originalListener.onDataAvailable(request, ctx,
stream, 0, count.value);
this.originalListener.onStopRequest(request, ctx, status);
},
最佳答案
My problem is: can I perform modification on DOM (so: the HTML document that is returned by server) before the page even starts displaying?
是的，javascript 执行在页面第一次呈现之前就开始了。 DOM 解析器确实通知 mutation observers ，因此您可以在解析器添加元素后立即删除它们。
即使在加载了 contentScriptWhen: "start" 的内容脚本中，您也可以注册突变观察器所以他们应该在渲染之前通知所有元素被添加到树中，因为观察者通知是在微任务队列中执行的，而渲染发生在宏任务队列上。
but I wasn't even able to get it to work: when attached as a pageMod on start the code failed on:
document.getElementById('appcontent').addEventListener('DOMContentLoaded', function(e)
当然。你不应该假设任何元素特别 - 甚至不是 <body>标签 - 在页面加载的早期就已经可用。您将不得不等待它们可用。
还有 DOMContentLoaded事件可以简单地在 document 上注册目的。我不知道你为什么要在某个元素上注册它。
(or event prevent any kind of page display before all page was loaded).
您真的不希望这样做，因为它会增加页面加载时间，从而降低网站的响应速度。
关于javascript - 在页面显示给用户之前拦截和修改 DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28573225/
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我试图在索引页中创建一个超链接，但它没有显示，也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线，我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article
我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser
我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c
我意识到这可能是一个非常基本的问题，但我现在已经花了几天时间回过头来解决这个问题，但出于某种原因，Google就是没有帮助我。(我认为部分问题在于我是一个初学者，我不知道该问什么......)我也看过O'Reilly的RubyCookbook和RailsAPI，但我仍然停留在这个问题上.我找到了一些关于多态关系的信息，但它似乎不是我需要的(尽管如果我错了请告诉我)。我正在尝试调整MichaelHartl'stutorial创建一个包含用户、文章和评论的博客应用程序(不使用脚手架)。我希望评论既属于用户又属于文章。我的主要问题是:我不知道如何将当前文章的ID放入评论Controller。
我在新的Debian6VirtualBoxVM上安装RVM时遇到问题。我已经安装了所有需要的包并使用下载了安装脚本(curl-shttps://rvm.beginrescueend.com/install/rvm)>rvm，但以单个用户身份运行时bashrvm我收到以下错误消息:ERROR:Unabletocheckoutbranch.安装在这里停止，并且(据我所知)没有安装RVM的任何文件。如果我以root身份运行脚本(对于多用户安装)，我会收到另一条消息:Successfullycheckedoutbranch''安装程序继续并指示成功，但未添加.rvm目录，甚至在修改我的.bas
目前，Itembelongs_toCompany和has_manyItemVariants。我正在尝试使用嵌套的fields_for通过Item表单添加ItemVariant字段，但是使用:item_variants不显示该表单。只有当我使用单数时才会显示。我检查了我的关联，它们似乎是正确的，这可能与嵌套在公司下的项目有关，还是我遗漏了其他东西？提前致谢。注意:下面的代码片段中省略了不相关的代码。编辑:不知道这是否相关，但我正在使用CanCan进行身份验证。routes.rbresources:companiesdoresources:itemsenditem.rbclassItemi