如何向元素添加onload事件?
我可以使用:
<div onload="oQuickReply.swap();" ></div>
对于这个吗?
当前回答
首先回答你的问题:不，你不能，不能直接这样做，就像你想做的那样。 也许现在回答有点晚，但这是我的解决方案，没有jQuery，纯javascript。 它最初是用来在DOM加载后和在keyup上应用一个调整文本区域大小的函数。
同样地，你可以用它来做一些(所有)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);
});
如果你真的需要在DOM加载后加载div，例如在ajax调用之后，你可以使用一个非常有用的hack，这很容易理解，你会发现它…working with-elements-before-the- DOM -is-ready....它说“在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);
其他回答
试试这个!永远不要在div上使用触发器两次!
您可以在div标记之前定义要调用的函数。
$(function(){
$('div[onload]').trigger('onload');
});
演示：杰斯菲德尔
我有同样的问题，并试图让一个Div加载一个滚动脚本，使用onload或load。我发现的问题是，它总是在Div打开之前工作，而不是在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>
I placed the Div inside a Span and gave the Span two events, a mouseover and a mouseout. Then below that Div, I placed a link to open the Div, and gave that link an event for onclick. All events the exact same, to make the page scroll down to bottom of page. Now when the button to open the Div is clicked, the page will jump down part way, and the Div will open above the button, causing the mouseover and mouseout events to help push the scroll down script. Then any movement of the mouse at that point will push the script one last time.
在2019年11月，我正在寻找一种方法来创建一个(假设的)onparse EventListener <元素>不采取onload。
(假设的)onparse EventListener必须能够在元素被解析时监听。
第三次尝试(最终解决方案)
我对下面的Second Attempt非常满意，但我突然想到，通过创建一个量身定制的事件，我可以让代码更短更简单:
let parseEvent = new Event('parse');
这是目前最好的解决方案。
下面的例子:
创建一个定制的解析事件 声明一个函数(可以在window中运行)。Onload或任何时间): 查找文档中包含data-onparse属性的任何元素 将解析EventListener附加到每个这些元素 将解析事件分派给每个元素以执行回调
工作的例子:
// 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><div></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的聪明的空图像Hack)使用了硬编码的<img />并成功了。
我认为应该可以完全删除硬编码的<img />，只在检测后动态插入它，在一个需要触发onparse事件的元素中，像这样的属性:
data-onparse="run-oQuickReply.swap()"
事实证明，这确实非常有效。
下面的例子:
查找文档中包含data-onparse属性的任何元素 动态生成<img src />并将其添加到文档中，紧跟在每个元素之后 当呈现引擎解析每个<img src />时，触发onerror EventListener 执行回调并从文档中删除动态生成的<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><div></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年开始)——这是，到目前为止，我遇到的最好的方法。
下面的例子:
当呈现引擎解析<img src />时触发onerror EventListener 执行回调并从文档中删除<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 />
使用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>
我正在学习javascript和jquery，并通过所有的答案， 我在调用javascript函数加载div元素时遇到了同样的问题。 我尝试了$('<divid>').ready(function(){alert('test'})，它为我工作。我想知道这是一个好方法来执行onload调用div元素的方式，我使用jquery选择器。
谢谢
推荐文章
- 将lodash导入到angular + typescript应用程序中
- 什么时候使用setAttribute vs .attribute=在JavaScript?
- 每60秒调用一个函数
- 如何隐藏元素而不让他们在页面上占用空间?
- 我如何链接到谷歌地图与特定的经度和纬度?
- 我如何上传一个文件与JS获取API?
- 在JavaScript中是否有一个“not in”操作符来检查对象属性?
- 防止跨度元件断行
- 我如何能得到滚动条的位置与JavaScript?
- JavaScript中的yield关键字是什么?
- 如何显示一个对象的所有方法?
- 如何防止滚动条重新定位网页?
- .js和.mjs文件有什么区别?
- Axios处理错误
- ESLint解析错误:意外的令牌