我想知道什么是最好的方法来检测页面何时完成加载,有问题的页面位于不同的选项卡或窗口中,...以及要加载的页面可以是Web上的任何页面而不是我的控制.
我只使用Firefox,我不介意解决方案是否需要Firefox扩展或Grease Monkey脚本(我已经添加了配置/命令以允许访问来自不同域的页面).
下面的代码显示了一次尝试.它有时会检测初始页面何时加载但是当我按"提交"将新页面重新加载到另一个窗口时,它不会检测到它.
谢谢.
<html>
<head>
<script type="text/javascript">
currentPageObj = window.open("http://www.bbc.co.uk", "currentPage");
currentPageObj.addEventListener("load", function(){alert("loaded")}, false);
</script>
</head>
<body>
<form action="http://www.example.com" target="currentPage">
<input type="submit">
</form>
</body>
</html>
我在我正在处理的网站的主要部分有四个页面,有标签可以在它们之间切换.我希望4个选项卡之间的切换是一个渐变过渡(使用jQuery).这一切都很好,花花公子,但我也希望SEO将每个视为一个单独的页面.我还希望能够链接到URL并为其提取正确的内容,即使它在技术上是同一页面.
Facebook这样做(facebook.com/#!/another-string-here),你可以在图片等之间切换,所以它有点像javascript查询字符串.
这允许立即切换,链接到它的能力,但每个都充当它自己的页面.
是否有推荐的方法来执行此操作？
更新我发现的最好的是SammyJS - 尚未实施,但它看起来是最好的答案:http://sammyjs.org/
我有一个看似非常棘手的情况.我想将一个对象的实例传递给由同一个对象实例创建的DOM元素的事件监听器(如果这是有意义的话).
function Object(callback){
this.callback = callback;
this.node = document.createElement('div');
this.send = function(){
document.getElementById('list').appendChild(this.node);
}
this.node.addEventListener('click',function(){/*this.callback() of Object instance needs to go here*/},true);
}
我知道使用callback()将在事件监听器内部工作,但这不是我需要的,因为我将使用实例中的变量,这些变量稍后不会从构造中传递.
我怎么解决这个问题？
我经常在我的Javascript中使用以下模式:
x = couldBeNullThing || valueIfItIsNull;
因为它胜于:
x = couldBeNullThing ? couldBeNullThing : valueIfItIsNull;
我也经常使用相同模式的轻微变体:
x = x || valueIfXIsNotDefined;
这一切都很棒...除了问题,我最近发现:
foo = "";
//assert foo.x === undefined;
foo.x = foo.x || valueIfXIsNotDefined;
//assert foo.x === undefined;
换句话说,如果你有一个字符串,你就做了string.aPropertyThatStringDoesntHave || foo,你既不会回头也不会回到实际价值; 相反,你得到了未定义.
谁能解释为什么会这样？在我看来,如果foo.x未定义,那么foo.x || anythingElse应该总是导致任何东西......所以为什么不呢？
我注意到,使用Firefox/Firebug(我的主要开发环境),一些错误会产生堆栈跟踪,而其他错误则不然.起初我认为这与我是否生成错误(例如,新错误("foo"))或Javascript是否生成它(例如,undefinedFoo + = 1)有关,但我注意到它发生在两种类型中错误.
所以,我的问题是,有谁知道是什么原因造成的？它是随机的还是有一些模式/逻辑？它只是Firefox和/或Firebug是跛脚还是其他浏览器也这样做？最重要的是,有什么我可以做的来控制它(特别是让它总是给我堆栈痕迹)？
这不是一个至关重要的问题(因为我总是可以在错误发生的任何行之前抛出"console.trace()"),但我很好奇是否有人知道答案.
**********编辑**********
我找到了这个主题:http : //groups.google.com/group/firebug/browse_thread/thread/1f32df8b96ec1d30/64b9074cb99056c2? pli=1,其中提到如果错误不是一个实例,Firefox不会向Firebug提供堆栈跟踪错误.换句话说,如果你抛出的东西不是新的错误("foo"),你就不会得到堆栈跟踪.
但是,这对我没有帮助,因为即使我抛出新的Error(),我也没有看到堆栈跟踪.
我试图让Backbone.ajax返回集合"集合".我需要在程序的另一部分中使用Model.
我想使数据与ajax方法处于同一级别.
Backbone.ajax({
dataType: "jsonp",
url: "https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=twitterapi&count=25",
data: "",
success: function(val){ val
var Model = Backbone.Model.extend({});
var Collection = Backbone.Collection.extend({
model:Model
});
collection = new Collection(val);
console.log(collection);
}
});
关于其他语言的单元测试事件处理程序，这里有很多问题，但是当涉及JavaScript时，我一直找不到很好的答案。具体来说，我是在谈论类似的情况：
// inside a "view" class definition:
handleCheckboxClick: function() {
this.relevantData.toggleSomeValue();
return false;
}
// later on:
$('#someCheckbox').on('click', view.handleCheckboxClick);
显然，事件处理程序（this.relevantData.toggleSomeValue()）中有逻辑，但是与此同时，没有其他方法可以调用该处理程序，因此，与进行单元测试一样，它不会捕获将来与重构相关的一些错误。而且，在任何给定的JavaScript代码库中，都有许多这些处理程序，因此测试它们不是一件容易的事。
另外，在许多JS商店（一定是在我们的商店）中，还使用Selenium进行了功能级别的测试，这些测试通常会捕获明显的UI问题（例如，事件处理程序中断时）。
因此，一方面，我得到了“逻辑的单元测试==好的”，而且我不想在不花钱的情况下不测试某些代码，如果以后再付钱的话。另一方面，当涉及单元测试时，这个特定的代码子集似乎成本很高且价值较低。因此，对于SO社区，我的问题是，JS开发人员是否应该单元测试其事件处理功能？
当我通过 Node.js 运行我的 Mocha 测试套件并且代码出错时，Node 会输出该错误的堆栈跟踪......除非它是由调用未定义变量引起的 TypeError，在这种情况下我没有堆栈跟踪或测试失败，只是一行输出。
例如，如果我有以下代码：
foo.bar(); // foo is undefined
我只是得到：
[TypeError: Cannot read property 'bar' of undefined]
当我运行摩卡时。
有没有办法让 Node/Mocha 输出此类错误的完整堆栈跟踪？没有它就很难找到它抱怨的问题。
编辑：实际上，问题似乎也与发生错误的位置有关。如果它发生在 a describeI内，我不会得到堆栈跟踪，但如果它们发生在itI内。有没有办法在describes （或其他任何没有堆栈跟踪的地方）中获取错误以显示其堆栈跟踪？
我--hot启用了 webpack-dev-server ，它工作得很好......对于 Javascript 文件。如果我：
/src/someFile.js用代码创建document.write("Foo");<script>引用/src/someFile.jsindex.html/src/someFile.js为document.write("Bar");但是，如果我有<p>Foo</p>我的index.html文件，并将其更改为<p>Bar</p>，我看不到更改。如果我刷新页面，我确实看到了变化，所以我知道 webpack 正在服务index.html；当我保存文件时，它只是不热交换它。
有谁知道如何修复webpack-dev-server以响应文件更改自动更新我的 HTML？
我在使用React propTyoes时遇到问题。正如您在下面的代码中看到的那样，我创建了一个需要2个道具才能工作的组件。
当我在App文件中使用该组件时，仅传递了1个属性，而没有“ stateSidebarVisible”，它不会抛出任何错误/警告反应...（我阅读了很多有关NODE_ENV生产/开发的信息，在我的节点中搜索process.env，但没有找到NODE_ENV变量）。有什么线索吗？
FFMainHeader
export default class FFMainHeader extends React.Component {
render() {...}
}
FFMainHeader.propTypes = {
stateSidebarVisible: React.PropTypes.bool.isRequired,
handleSidebarChange: React.PropTypes.func.isRequired
};
应用程式
这是我所谓的FFMainHeader组件。
export default class FFMainApp extends React.Component {
.......
render() {
return (
<div id="FFMainApp">
<FFMainHeader
handleSidebarChange={this.onSidebarChange} />
<FFMainSidebar />
</div>
);
}
}
编辑
export default class FFMainHeader extends React.Component {
constructor(props) {
super(props);
this.clickSidebarChange = this.clickSidebarChange.bind(this);
}
clickSidebarChange(e) {
e.preventDefault();
(this.props.stateSidebarVisible) ?
this.props.stateSidebarVisible = false :
this.props.stateSidebarVisible = true;
this.props.handleSidebarChange(this.props.stateSidebarVisible);
}
render() …javascript ×7
backbone.js ×1
detect ×1
dom ×1
firebug ×1
firefox ×1
hashtag ×1
jquery ×1
json ×1
loading ×1
mocha.js ×1
node.js ×1
object ×1
php ×1
reactjs ×1
stack-trace ×1
tabs ×1
truthiness ×1
unit-testing ×1
webpack ×1