如何将onload事件添加到div元素

Answers:

233

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

例：

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

或者-甚至更好-就在</body>：

...
<script type="text/javascript">
   oQuickReply.swap('somid');
</script>
</body>

...因此它不会阻止以下内容的加载。

— 丹曼
source
3
根据用法，最好将其放在的前面</body>。fe，如果您只想在<div>启用了javascript的情况下隐藏，但要避免“闪烁”。可见时间取决于浏览器需要加载/解析所有内联/外部脚本的时间。
— mgutt
这是一种反模式吗？最好将所有js保留在自己的文件中？当某些元素加载到文档中时，是否可以选择运行js？
— 莱恩·沃尔顿
1
这不是反模式，但是您通常需要等待DOM加载然后执行所有JS任务。
— DanMan
1
将此链接丢给所有遇到此问题的人w3schools.com/tags/ev_onload.asp-当前支持的所有HTML元素onload
— Brandon Benefield
这个答案不再重要。这是一个新的
— -mplungjan
74

该onload事件只能在document(body)自身，框架，图像和脚本上使用。换句话说，它可以仅附加到主体和/或每个外部资源。div不是外部资源，它是作为正文的一部分加载的，因此该onload事件不适用于此。

— 基金
source
18
不仅在body元素中，还可以将其与image和iframe等一起使用。w3schools.com/jsref/event_onload.asp
— 乔
2
值得注意的是，内联脚本不是外部资源，因此onload在<script>没有srcHTML属性的情况下也不起作用（我试图
— 在内
28

onload事件仅支持以下几个标签。

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

这里是onload事件的参考

— 三田
source
17

试试这个！而且永远不要在div上使用两次触发器！

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

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

演示：jsfiddle

— 库夫
source
上面的jsfiddle没有jQuery加载器-并且不起作用。
— 阿里夫·伯汉
@Arif Burhan我不明白。我确实加载了JQuery（edge）。您可以再检查一次吗？即使使用移动设备，我也可以看到“ Hello World”。
— Kuofp '16
@Kuofp该小提琴实际上并没有在加载目标元素时调用处理程序。它仅使用jquery搜索具有属性的元素（在您的情况下onload），然后调用这些函数。如果你改变了属性比其他的东西该脚本甚至onload如jsfiddle.net/mrszgbxh
— Trindaz
1
@Trindaz就是这样！换句话说，脚本的行为类似于onload事件。感谢您留下意见！
— Kuofp '16
10

我只想在这里补充一下，如果有人想在div的加载事件上调用函数，而又不想使用jQuery（由于我的情况而导致冲突），则只需在所有html代码或任何其他代码之后调用一个函数您编写的其他代码（包括函数代码）只需调用一个函数。

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

要么

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

  }

 my_func();
</script>
— dev_khan
source
您可以通过这种方式添加多个功能吗？即在</ body>标记之前的html文档末尾？如果是，编写顺序是否重要？
— Neo
是的，您可以添加多个功能，并且顺序与普通（普通）JavaScript无关。
— dev_khan
7

我们可以使用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>
— 用户名
source
1
上一次，我检查了突变事件的执行情况。
— DanMan
7

十一月2019年，我寻求一种方法来创建一个（假设的）onparse EventListener对于<elements>不拿onload。

（假设的）onparse EventListener必须能够在解析元素时进行侦听。

第三次尝试（和最终解决方案）

我对下面的“ 第二次尝试”感到非常满意，但是这让我感到惊讶，我可以通过创建一个量身定制的事件来使代码更短，更简单：

let parseEvent = new Event('parse');

这是迄今为止最好的解决方案。

下面的例子：

  1. 量身定制 parse Event
  2. 声明一个函数（可以在window.onload任何时间运行）：
    • 查找文档中包含属性的任何元素 data-onparse
    • 将附加parse EventListener到每个元素
    • 将调度parse Event到这些元素中的每一个以执行Callback

工作示例：

// Create (homemade) parse event
let parseEvent = new Event('parse');

// Create Initialising Function which can be run at any time
const initialiseParseableElements = () => {

  // Get all the elements which need to respond to an onparse event
  let elementsWithParseEventListener = document.querySelectorAll('[data-onparse]');
  
  // Attach Event Listeners and Dispatch Events
  elementsWithParseEventListener.forEach((elementWithParseEventListener) => {

    elementWithParseEventListener.addEventListener('parse', updateParseEventTarget, false);
    elementWithParseEventListener.dataset.onparsed = elementWithParseEventListener.dataset.onparse;
    elementWithParseEventListener.removeAttribute('data-onparse');
    elementWithParseEventListener.dispatchEvent(parseEvent);
  });
}

// Callback function for the Parse Event Listener
const updateParseEventTarget = (e) => {
  
  switch (e.target.dataset.onparsed) {

    case ('update-1') : e.target.textContent = 'My First Updated Heading'; break;
    case ('update-2') : e.target.textContent = 'My Second Updated Heading'; break;
    case ('update-3') : e.target.textContent = 'My Third Updated Heading'; break;
    case ('run-oQuickReply.swap()') : e.target.innerHTML = 'This <code>&lt;div&gt;</code> is now loaded and the function <code>oQuickReply.swap()</code> will run...'; break;
  }
}

// Run Initialising Function
initialiseParseableElements();

let dynamicHeading = document.createElement('h3');
dynamicHeading.textContent = 'Heading Text';
dynamicHeading.dataset.onparse = 'update-3';

setTimeout(() => {

  // Add new element to page after time delay
  document.body.appendChild(dynamicHeading);

  // Re-run Initialising Function
  initialiseParseableElements();

}, 3000);
div {
  width: 300px;
  height: 40px;
  padding: 12px;
  border: 1px solid rgb(191, 191, 191);
}

h3 {
position: absolute;
top: 0;
right: 0;
}
<h2 data-onparse="update-1">My Heading</h2>
<h2 data-onparse="update-2">My Heading</h2>
<div data-onparse="run-oQuickReply.swap()">
This div hasn't yet loaded and nothing will happen.
</div>
展开摘要

第二次尝试

下面的“ 第一次尝试”（基于@JohnWilliams'出色的Empty Image Hack）使用了硬编码<img />并起作用。

我认为应该可以<img />完全删除硬编码，并且仅在检测到需要触发onparse事件的元素中的属性后才能动态插入它，例如：

data-onparse="run-oQuickReply.swap()"

事实证明，这确实很好。

下面的例子：

  1. 查找文档中包含属性的任何元素 data-onparse
  2. <img src />在每个元素之后立即动态生成一个并将其附加到文档
  3. onerror EventListener在呈现引擎解析每个元素时触发<img src />
  4. 执行Callback 并删除<img src />从文档动态生成的

工作示例：

// Get all the elements which need to respond to an onparse event
let elementsWithParseEventListener = document.querySelectorAll('[data-onparse]');

// Dynamically create and position an empty <img> after each of those elements 
elementsWithParseEventListener.forEach((elementWithParseEventListener) => {

  let emptyImage = document.createElement('img');
  emptyImage.src = '';
  elementWithParseEventListener.parentNode.insertBefore(emptyImage, elementWithParseEventListener.nextElementSibling);
});

// Get all the empty images
let parseEventTriggers = document.querySelectorAll('img[src=""]');

// Callback function for the EventListener below
const updateParseEventTarget = (e) => {

  let parseEventTarget = e.target.previousElementSibling;
  
  switch (parseEventTarget.dataset.onparse) {

    case ('update-1') : parseEventTarget.textContent = 'My First Updated Heading'; break;
    case ('update-2') : parseEventTarget.textContent = 'My Second Updated Heading'; break;
    case ('run-oQuickReply.swap()') : parseEventTarget.innerHTML = 'This <code>&lt;div&gt;</code> is now loaded and the function <code>oQuickReply.swap()</code> will run...'; break;
  }
  
  // Remove empty image
  e.target.remove();
}

// Add onerror EventListener to all the empty images
parseEventTriggers.forEach((parseEventTrigger) => {
  
  parseEventTrigger.addEventListener('error', updateParseEventTarget, false);
  
});
div {
  width: 300px;
  height: 40px;
  padding: 12px;
  border: 1px solid rgb(191, 191, 191);
}
<h2 data-onparse="update-1">My Heading</h2>
<h2 data-onparse="update-2">My Heading</h2>
<div data-onparse="run-oQuickReply.swap()">
This div hasn't yet loaded and nothing will happen.
</div>
展开摘要

第一次尝试

我可以建立在@JohnWilliams“ <img src>黑客（此页上，从2017年） -这是，到目前为止，最好的办法我都碰到过。

下面的例子：

  1. onerror EventListener渲染引擎解析时触发<img src />
  2. 执行Callback 并<img src />从文档中删除

工作示例：

let myHeadingLoadEventTrigger = document.getElementById('my-heading-load-event-trigger');

const updateHeading = (e) => {

  let myHeading = e.target.previousElementSibling;
  
  if (true) { // <= CONDITION HERE
    
    myHeading.textContent = 'My Updated Heading';
  }
  
  // Modern alternative to document.body.removeChild(e.target);
  e.target.remove();
}

myHeadingLoadEventTrigger.addEventListener('error', updateHeading, false);
<h2>My Heading</h2>
<img id="my-heading-load-event-trigger" src />
展开摘要

— 鲁宁
source
— Rounin
@DavidBradshaw -你不会相信，但我想我已经真正破解它。请参阅上方答案顶部的“ 第二次尝试”。
— 鲁宁
1
@DavidBradshaw-从头开始。我想出了第三次尝试。这是最终的解决方案。
— 鲁宁
也许削减答案下降到3版
— 大卫·布拉德肖
6

使用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>
— dota2pro
source
6

插入大量html（模板实例）后，我需要运行一些初始化代码，当然，我无权访问操纵模板和修改DOM的代码。对于通过插入html元素（通常是a）进行的DOM的任何部分修改，同样的想法也适用<div>。

前段时间，我对<img>包含在中的几乎不可见的onload事件进行了破解<div>，但发现有作用域的空样式也可以做到：

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

更新（2017年7月15日）<style>-IE的最新版本不支持onload。Edge确实支持它，但是一些用户将其视为不同的浏览器，并坚持使用IE。该<img>元素似乎在所有浏览器中都能更好地工作。

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

为了最大程度地减少图像的视觉影响和资源使用，请使用内联src，使其保持较小且透明。

我觉得我需要使用a的注释<script>是确定<div>脚本附近的难度有多大，尤其是在模版模板所生成的每个实例中，模板在哪个位置不能具有相同的ID。我认为答案可能是document.currentScript，但这不是普遍支持的。甲<script>元件不能可靠地确定其自己的DOM位置; 对“ this”的引用指向主窗口，没有帮助。

我认为尽管有些<img>愚蠢，还是有必要适应使用元素。这可能是DOM / javascript框架中可能使用插入的漏洞。

— 弗洛伊德·科施（Floyd Kosch）
source
3

由于onload仅在少数几个元素上支持该事件，因此您必须使用其他方法。

您可以为此使用MutationObserver：

const trackElement = element => {
  let present = false;
  const checkIfPresent = () => {
    if (document.body.contains(element)) {
      if (!present) {
        console.log('in DOM:', element);
      }
      present = true;
    } else if (present) {
      present = false;
      console.log('Not in DOM');
    }
  };

  const observer = new MutationObserver(checkIfPresent);
  observer.observe(document.body, { childList: true });
  checkIfPresent();

  return observer;
};

const element = document.querySelector('#element');
const add = () => document.body.appendChild(element);
const remove = () => element.remove();

trackElement(element);
<button onclick="add()">Add</button>
<button onclick="remove()">Remove</button>

<div id="element">Element</div>
展开摘要

— jo_va
source
2

我真的很喜欢YUI3库。

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

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

请参阅：http : //developer.yahoo.com/yui/3/event/#onavailable

— j
source
9
为了绑定单个，这是要转储到页面上的JS一大堆onload。
— meagar
1
@meagar-对，尽管我发现在页面上只做两三个简单的JS事情变得越来越少了。担心跨浏览器兼容性也使我发疯。
— mjhm
0

我正在学习javascript和jquery，正在经历所有答案，当调用javascript函数加载div元素时遇到相同的问题。我尝试了$('<divid>').ready(function(){alert('test'})，对我有用。我想知道这是一种使用jQuery选择器的方式对div元素执行onload调用的好方法。

谢谢

— 苏博罗
source
0

综上所述，您不能在DIV上使用onLoad事件，而是在body标记之前使用它。

但是如果您只有一个页脚文件，并将其包含在许多页面中。最好先检查您想要的div是否显示在该页面上，以便在不包含该DIV的页面中不执行代码，以使其加载更快并为您的应用程序节省一些时间。

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

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

我有同样的问题，并试图让Div使用onload或load加载滚动脚本。我发现的问题是，它始终会在Div可以打开之前运行，而不是在打开期间或之后运行，因此它实际上不会运行。

然后我想出了解决方法。

<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>

我将Div放在Span内，并给Span提供了两个事件：mouseover和mouseout。然后，在该Div下方，我放置了一个链接以打开该Div，并为该链接提供了一个onclick事件。所有事件都完全相同，以使页面向下滚动到页面底部。现在，单击打开Div的按钮时，页面将部分向下跳转，并且Div将在按钮上方打开，从而导致mouseover和mouseout事件有助于推动向下滚动脚本。然后，此时鼠标的任何移动都将最后一次推送脚本。

— 可选择的
source
0

您可以使用一个间隔来检查它，直到它像这样加载：https : //codepen.io/pager/pen/MBgGGM 

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);
— 罗伯特·佩奇
source
0

首先回答您的问题：不，您不能，不是直接像您想要的那样。回答可能有点晚，但这是我的解决方案，没有jQuery，没有纯JavaScript。最初是为了在DOM加载后和在keyup上将调整大小功能应用于textareas而编写的。

您可以使用它以相同的方式对（全部）div或仅对一个div进行某些操作，例如：

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);
});

如果您确实需要对div进行某些操作，那么在DOM加载后（例如，在ajax调用之后）加载，您可以使用一个非常有用的技巧，这一点很容易理解，您会发现它...元素-前最DOM的是准备......。它说“在DOM准备就绪之前”，但是在ajax插入或js-appendChild-div之后的任何方式下，它的工作方式都非常出色。这是代码，对我的需求有一些细微的变化。

的CSS

.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); }  
}

javascript

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

当您从服务器加载一些html并将其插入DOM树时，可以使用DOMSubtreeModified它，但是不建议使用 它-因此您可以MutationObserver直接在loadElement函数中使用或检测新内容，因此您无需等待DOM事件

显示代码段

— 卡米尔（KamilKiełczewski）
source
-1

可以通过属性（<body onload="myFn()"> ...）或通过绑定Java 事件来使用body.onload事件。这在jQuery中极为常见：

$(document).ready(function() {
    doSomething($('#myDiv'));
});
— 移动
source
javascript纯而不是jquery，请检查标签;）
— KingRider
-3

试试这个。

document.getElementById("div").onload = alert("This is a div.");
<div id="div">Hello World</div>

也尝试这个。您需要将其.从中删除oQuickReply.swap()才能使该功能正常工作。

document.getElementById("div").onload = oQuickReplyswap();
function oQuickReplyswap() {
alert("Hello World");
}
<div id="div"></div>

它似乎有效，但仅alert("This is a div.");当执行此行并将结果（undefined分配给）时才被调用div.onload。这是完全没有意义的。
— Frederic Leitenberger
-4

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

$(function ()
{
  $(".ccsdvCotentPS").trigger("onkeydown");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<div  onkeydown="setCss( );"> </div>`

— 穆罕默德·比拉勒（Muhammad Bilal）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.