我的角度控制器中有一个函数,我希望这个函数可以在文档准备好的情况下运行但我注意到角度在创建dom时运行它.
function myController($scope)
{
$scope.init = function()
{
// I'd like to run this on document ready
}
$scope.init(); // doesn't work, loads my init before the page has completely loaded
}
Run Code Online (Sandbox Code Playgroud)
谁知道我怎么能这样做?
我想在加载页面时运行一个函数,但我不想在<body>标记中使用它.
如果我在其中初始化它,我有一个运行的脚本<body>,如下所示:
function codeAddress() {
// code
}
Run Code Online (Sandbox Code Playgroud)
<body onLoad="codeAddress()">
Run Code Online (Sandbox Code Playgroud)
但是我想在没有它的情况下运行它<body onload="codeAddress()">并且我已经尝试了很多东西,例如:
window.onload = codeAddress;
Run Code Online (Sandbox Code Playgroud)
但它没有用.
那么如何在加载页面时运行它?
这是我的简短HTML文档.
为什么Chrome控制台会注意到此错误:
"未捕获的TypeError:无法调用方法'appendChild'的
null"?
<html>
<head>
<title>Javascript Tests</title>
<script type="text/javascript">
var mySpan = document.createElement("span");
mySpan.innerHTML = "This is my span!";
mySpan.style.color = "red";
document.body.appendChild(mySpan);
alert("Why does the span change after this alert? Not before?");
</script>
</head>
<body>
</body>
</html>
Run Code Online (Sandbox Code Playgroud) 而不是提交按钮我有一个链接:
<form>
<a href="#"> submit </a>
</form>
Run Code Online (Sandbox Code Playgroud)
我可以在点击时提交表单吗?
我必须为项目使用vanilla JavaScript.我有一些功能,其中一个是打开菜单的按钮.它适用于目标ID存在的页面,但会导致id不存在的页面出错.在那些函数找不到id的页面上,我收到一个"无法读取属性'addEventListener'的null"错误,我的其他函数都没有工作.
下面是打开菜单的按钮的代码.
function swapper() {
toggleClass(document.getElementById('overlay'), 'open');
}
var el = document.getElementById('overlayBtn');
el.addEventListener('click', swapper, false);
var text = document.getElementById('overlayBtn');
text.onclick = function(){
this.innerHTML = (this.innerHTML === "Menu") ? "Close" : "Menu";
return false;
};
Run Code Online (Sandbox Code Playgroud)
我该如何处理?我可能需要将所有代码包装在另一个函数中或使用if/else语句,以便它只搜索特定页面上的id,但不确定.
在chrome的Developer工具中,蓝色垂直线标记为"DOMContent event fired",红线表示"load event fired"."DOMContent事件被触发"是否意味着浏览器开始执行内联javascript?并且"加载事件已触发"意味着它会触发"onload"事件?
我想在不使用jQuery的情况下重写这一行,因此可以更快地应用(并且在下载jQuery库之前).这条线是......
$(document).ready(function() { $('body').addClass('javascript'); });
Run Code Online (Sandbox Code Playgroud)
如果我将它添加到html元素中,我是否可以省去DOM准备好的部分?但有一个问题是验证器不喜欢html元素上的class属性,即使它是用JS插入的.
那么,如果没有jQuery,我该如何重写呢?
什么区别
window.addEventListener("load", load, false);
Run Code Online (Sandbox Code Playgroud)
和
document.addEventListener("DOMContentLoaded", load, false);
Run Code Online (Sandbox Code Playgroud)
?
在推迟attirbute时,MDN说:
此布尔属性设置为向浏览器指示在解析文档之后但在触发DOMContentLoaded之前要执行脚本.defer属性应仅用于外部脚本.
在DOMContentLoaded MDN上也说:
完全加载和解析初始HTML文档时会触发DOMContentLoaded事件,而无需等待样式表 ...
所以DOMContentLoaded在CSSOM准备好之前就被解雇了.这意味着延迟脚本在准备好之前执行CSSOM.但如果这是真的,那些scrips必须无法获得正确的css属性值,并且不能正确应用css.但事实并非如此,我们知道所有延迟脚本都能正常运行.
PS:请不要谷歌说在执行任何内联javscript之前构建CSSOM
但谷歌在技术上是不正确的.在CSSOM准备好之前,内联JavaScript会被执行.从我的测试中我发现MDN是正确的,如果在css文件(或js是内联)之前下载了js文件(延迟和非延迟),那么在CSSOM准备好之前执行js.所以js可能会错误地处理样式.为了避免这种情况,我们需要在所有js逻辑之前进行强制回流.
因此,如果用户访问我们的网站时所有需要缓存的js和css没有缓存,或者在css之前下载了js,那么他可能会看到错误渲染的页面.为了避免这种情况,我们应该在所有网站的js文件中添加强制重排.
我正在深入研究随谷歌Chrome一起提供的性能工具,因为我正试图了解性能改进技术.我正在玩Timeline选项卡,我发现在我的页面上,First Paint事件发生在DOMContentLoaded事件之前.我读了一些文章,据说当浏览器开始向用户显示内容的第一时刻必须在DOMContentLoaded之后.有人可以解释一下这是真的吗?