Fatal编程技术网
  • javascript/
  • Javascript 如何向div元素添加onload事件

Javascript 如何向div元素添加onload事件

javascript html

Javascript 如何向div元素添加onload事件,javascript,html,Javascript,Html,如何向元素添加onload事件 我可以使用： <div onload="oQuickReply.swap();" ></div> 为此？只能在文档（正文）本身、框架、图像和脚本上使用onload事件。换句话说，它只能附加到主体和/或每个外部资源。div不是一个外部资源，它是作为主体的一部分加载的，因此onload事件在那里不适用。我非常喜欢YUI3库 <div id="mydiv"> ... </div> <script> YU

如何向元素添加
onload
事件

我可以使用：

<div onload="oQuickReply.swap();" ></div>
为此？

只能在
文档（正文）
本身、框架、图像和脚本上使用
onload
事件。换句话说，它只能附加到主体和/或每个外部资源。div不是一个外部资源，它是作为主体的一部分加载的，因此
onload
事件在那里不适用。

我非常喜欢YUI3库

<div id="mydiv"> ... </div>

<script>
YUI().use('node-base', function(Y) {
  Y.on("available", someFunction, '#mydiv')
})

。。。
YUI（）。使用（'node-base'，函数（Y）{
Y.on（“可用”，someFunction“#mydiv”）
})
请参阅：

使用body.onload事件，可以通过属性（
…
）或通过在Javascript中绑定事件。这在以下情况中极为常见：

不，你不能。使其工作的最简单方法是将函数调用直接放在元素之后

例如：

...
<div id="somid">Some content</div>
<script type="text/javascript">
   oQuickReply.swap('somid');
</script>
...

。。。
一些内容
oQuickReply.swap（'somid'）；
...
或者-甚至更好-就在
前面：

。。。
oQuickReply.swap（'somid'）；
…因此它不会阻止加载以下内容。

我只想在此添加一点，如果有人想在加载div事件时调用函数&您不想使用jQuery（由于与我的情况一样存在冲突），那么只需在所有html代码或您编写的任何其他代码（包括函数代码和 只需调用一个函数

/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
   function_name();
</script>

/*所有其他代码*/
-----
------
/*----最后--*/
函数名称（）；
或

/*所有其他代码*/
-----
------
/*----最后--*/
函数my_func（）{
功能定义；
}
我的函数（）；
我们可以使用MutationObserver有效地解决这个问题，在下面添加一个示例代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #second{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #a1a1a1;
        }
    </style>
</head>
<body>
<div id="first"></div>
<script>
    var callthis = function(element){
           element.setAttribute("tabIndex",0);
        element.focus();
        element.onkeydown = handler;
        function handler(){
                alert("called")
        }
    }


    var observer = new WebKitMutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            for (var i = 0; i < mutation.addedNodes.length; i++)
            if(mutation.addedNodes[i].id === "second"){
                callthis(mutation.addedNodes[i]);
            }

        })
    });
    observer.observe(document.getElementById("first"), { childList: true });


    var ele = document.createElement('div');
    ele.id = "second"

    document.getElementById("first").appendChild(ele);

</script>

</body>
</html>


#第二{
位置：绝对位置；
宽度：100px；
高度：100px；
背景色：#a1a1；
}
var callthis=函数（元素）{
setAttribute（“tabIndex”，0）；
元素focus（）；
element.onkeydown=处理程序；
函数处理程序（）{
警报（“呼叫”）
}
}
var observer=新的WebKit突变观察者（功能（突变）{
突变。forEach（功能（突变）{
对于（var i=0；i
试试这个！不要在div上使用两次触发器

您可以在div标记之前定义要调用的函数

$(function(){
    $('div[onload]').trigger('onload');
});
演示：

不能在div上添加事件onload，但可以在文档加载时添加onkeydown并触发onkeydown事件

$（函数（）
{
$（“.ccsdvCotentPS”）.trigger（“onkeydown”）；
});



`
使用iframe并将其隐藏iframe的工作原理类似于body标记


<!DOCTYPE html>
<html>
<body>

<iframe style="display:none" onload="myFunction()" src="http://www.w3schools.com"></iframe>
<p id="demo"></p>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Iframe is loaded.";
}
</script>

</body>
</html>






函数myFunction（）{
document.getElementById（“demo”）.innerHTML=“Iframe已加载。”；
}

它只支持下面列出的几个标记的onload事件


<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>



，



在这里，您可以使用onerror在IMG元素上自动触发一些js，而不使用src


<img src onerror='alert()'>



我正在学习javascript和jquery，并且正在浏览所有答案，
在调用javascript函数加载div元素时，我遇到了同样的问题。
我尝试了
$（''）.ready（function（）{alert（'test'}）
，它对我起了作用。我想知道这是一种很好的方法，可以像使用jquery选择器那样对div元素执行onload调用


谢谢
在插入一块html（模板实例）后，我需要运行一些初始化代码，当然我没有权限访问操作模板和修改DOM的代码。同样的想法也适用于通过插入html元素（通常是
）对DOM进行部分修改

不久前，我对一个几乎看不见的
onload事件进行了黑客攻击
...


要最小化图像的视觉影响和资源使用，请使用内联src，使其保持小而透明

关于使用
我觉得我需要说明的一点是，确定脚本靠近哪个
要困难得多，特别是在模板制作中，模板生成的每个实例中不能有相同的id。我想答案可能是document.currentScript，但这并不是普遍支持的。a
元素无法可靠地确定自己的DOM位置；对“this”的引用指向主窗口，没有任何帮助


我认为有必要满足于使用
元素，尽管它很愚蠢。这可能是DOM/javascript框架中的一个漏洞，可以使用插拔。
如上所述，您不能在DIV上使用onLoad事件，而是在body标记之前使用

但是，如果您有一个页脚文件并将其包含在多个页面中，那么最好首先检查所需的div是否显示在该页面上，这样代码就不会在不包含该div的页面中执行，以加快加载速度并为应用程序节省一些时间

因此，您需要给该DIV一个ID，并执行以下操作：


<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" >   </style>
.....
</div>



我也有同样的问题，试图让一个Div加载一个滚动脚本，使用onload或load。我发现的问题是，它总是在Div打开之前工作，而不是在打开期间或之后，所以它不会真正工作

然后我想到了这个作为一种变通方法


<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>






我把这个Div放在一个Span中，给Span两个事件，一个mouseover和一个mouseout。然后在这个Div下面，我放了一个链接来打开这个Div，并给这个链接一个onclick事件。好的

<img src onerror='alert()'>



<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" >   </style>
.....
</div>



<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>



var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}



<body>

<span onmouseover="window.scrollTo(0, document.body.scrollHeight);" 
onmouseout="window.scrollTo(0, document.body.scrollHeight);">

<div id="">
</div>

<a href="" onclick="window.scrollTo(0, document.body.scrollHeight);">Link to open Div</a>

</span>
</body>



let checkonloadDoSomething = setInterval(() => {
  let onloadDoSomething = document.getElementById("onloadDoSomething");
  if (onloadDoSomething) {
    onloadDoSomething.innerHTML="Loaded"
    clearInterval(checkonloadDoSomething);
  } else {`enter code here`
    console.log("Waiting for onloadDoSomething to load");
  }
}, 100);



document.addEventListener("DOMContentLoaded", function() {
    var divs = document.querySelectorAll('div'); // all divs
    var mydiv = document.getElementById('myDiv'); // only div#myDiv
    divs.forEach( div => {
        do_something_with_all_divs(div);
    });
    do_something_with_mydiv(mydiv);
});



.loaded { // I use only class loaded instead of a nodename
    animation-name: nodeReady;
    animation-duration: 0.001s;
}

@keyframes nodeReady {  
    from { clip: rect(1px, auto, auto, auto); }
    to { clip: rect(0px, auto, auto, auto); }  
}



document.addEventListener("animationstart", function(event) {
    var e = event || window.event;
    if (e.animationName == "nodeReady") {
        e.target.classList.remove('loaded');
        do_something_else();
    }
}, false);



let parseEvent = new Event('parse');



$(document).on('EventName', '#my-id', function() {
 // do something
});



<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script> and <style>



<div class="parent-static-div">
  <div class="dynamic-loaded-div">
    this div is loaded after DOM ready event
  </div>
</div>



var observer = new MutationObserver(function (mutationList, obsrvr) {
  var div_to_check = document.querySelector(".dynamic-loaded-div"); //get div by class
  // var div_to_check = document.getElementById('div-id'); //get div by id

  console.log("checking for div...");
  if (div_to_check) {
    console.log("div is loaded now"); // DO YOUR STUFF!
    obsrvr.disconnect(); // stop observing
    return;
  }
});

var parentElement = document.querySelector("parent-static-div"); // use parent div which is already present in DOM to maximise efficiency
// var parentElement = document // if not sure about parent div then just use whole 'document'

// start observing for dynamic div
observer.observe(parentElement, {
  // for properties details: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit
  childList: true,
  subtree: true,
});