回答:
いいえ、できません。それを機能させる最も簡単な方法は、要素の直後に関数呼び出しを置くことです
例：
...
<div id="somid">Some content</div>
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
...または-さらに良い-直前</body>：
...
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
</body>...次のコンテンツの読み込みをブロックしません。
</body>。<div>javascriptが有効になっている場合にのみ非表示にしたいが、「フラッシュ」は避けたい場合はfe 。表示時間は、ブラウザがすべてのインライン/外部スクリプトをロード/解析する必要がある時間に依存します。
onload
onloadイベントにのみに使用することができdocument(body)、それ自体、フレーム、画像、およびスクリプト。つまり、本体または各外部リソース、あるいはその両方にのみアタッチできます。divは外部リソースではなく、本文の一部として読み込まれるため、onloadイベントはそこで適用されません。
onloadはないため<script>、srcHTML属性がないと機能しません（インラインスクリプトでこのアドバイスを使用しようとしたところ、機能していませんでした）
onerrorを使用してIMG要素で一部のjsを自動的にトリガーできます。srcは使用できません。
<img src onerror='alert()'>onloadイベントは、以下にリストするようないくつかのタグでのみサポートします。
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>ここでonloadイベントのリファレンス
これを試して！また、divでトリガーを2回使用しないでください。
divタグの前に呼び出す関数を定義できます。
$(function(){
$('div[onload]').trigger('onload');
});デモ：jsfiddle
onload）を持つ要素を検索し、それらの関数を呼び出すだけです。onloadたとえばjsfiddle.net/mrszgbxh
ここに追加したいのは、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>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>2019年11月、私は（仮定）onparse EventListenerを<elements>とらない方法を模索していますonload。
（仮想）onparse EventListenerは、要素が解析されるときにリッスンできる必要があります。
以下の2回目の試みにはかなり満足していましたが、オーダーメードのイベントを作成することで、コードをより短くて簡単にすることができることに感銘を受けました。
let parseEvent = new Event('parse');これはまだ最高のソリューションです。
以下の例：
parse Eventwindow.onloadいつでも実行できます）。
data-onparseparse 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><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「brilliant Empty Image Hack」に基づく）は、ハードコードされ<img />て機能しました。
ハードコードされたものを<img />完全に削除し、検出後に動的に挿入するだけで、onparseイベントを発生させる必要のある要素に次のような属性を挿入できるはずだと思いました。
data-onparse="run-oQuickReply.swap()"結局、これは確かに非常にうまく機能します。
以下の例：
data-onparse<img src />各要素の直後にドキュメントに追加しますonerror EventListenerレンダリングエンジンがそれぞれを解析するときに<img src />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><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年からこのページ） -で、これまでのところ、私は最善のアプローチは、出くわします。
以下の例：
onerror EventListenerレンダリングエンジンが解析するときに発生します<img src />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 />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>html（テンプレートインスタンス）のチャンクが挿入された後、いくつかの初期化コードを実行する必要がありました。もちろん、テンプレートを操作してDOMを変更するコードにアクセスできませんでした。同じ考え方は、html要素の挿入によるDOMの部分的な変更にも当てはまります。通常は<div>ます。
少し前に、に<img>含まれているほとんど見えないonloadイベントでハックを行いました<div>が、スコープ付きの空のスタイルでも実行できることを発見しました。
<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style>
.....
</div>アップデート（2017年7月15日）<style>-onloadは、最新バージョンのIEではサポートされていません。Edgeはそれをサポートしていますが、一部のユーザーはこれを別のブラウザーと見なしてIEを使い続けています。<img>要素は、すべてのブラウザ間でより良い動作しているようです。
<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>画像の視覚的な影響とリソースの使用を最小限に抑えるには、画像を小さく透明に保つインラインsrcを使用します。
特にテンプレートが生成する各インスタンスで同一のIDを使用できない場所でのテンプレート作成では、スクリプトの近く<script>を決定するのがどれほど難しいかについて、私が感じなければならない1つのコメント<div>があります。答えはdocument.currentScriptかもしれないと思いましたが、これは普遍的にサポートされていません。<script>要素が確実に独自DOMの位置を決定することができません。'this'への参照はメインウィンドウを指しており、役に立ちません。
私は<img>間抜けであるにもかかわらず、要素を使用することで解決する必要があると思います。これは、プラグインを使用する可能性があるDOM / JavaScriptフレームワークの穴である可能性があります。
以来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>すべて述べたように、DIVではonLoadイベントを使用できませんが、bodyタグの前で使用できます。
ただし、フッターファイルが1つあり、それを多くのページに含める場合。目的のdivが表示されているページにあるかどうかを最初に確認することをお勧めします。そのため、そのDIVを含まないページではコードが実行されず、ロードが高速になり、アプリケーションの時間を節約できます。
そのため、DIVにIDを指定して、次のようにする必要があります。
var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}同じ質問があり、onloadまたはloadを使用してDivにスクロールスクリプトをロードさせようとしていました。私が見つけた問題は、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>DivをSpanの内部に配置し、Spanにマウスオーバーとマウスアウトの2つのイベントを与えました。次にそのDivの下に、Divを開くためのリンクを配置し、そのリンクにonclickのイベントを与えました。すべてのイベントはまったく同じで、ページをページの一番下までスクロールします。これで、Divを開くためのボタンをクリックすると、ページが途中までジャンプし、Divがボタンの上に開いて、マウスオーバーイベントとマウスアウトイベントがスクロールダウンスクリプトのプッシュに役立ちます。次に、その時点でマウスを動かすと、スクリプトが最後にもう一度プッシュされます。
次のように読み込まれるまで、間隔を使用してそれをチェックすることができます：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);最初にあなたの質問に答えてください：いいえ、できません。あなたが望んでいたようには直接できません。答えが少し遅いかもしれませんが、これはjQueryなしの純粋なjavascriptでの私の解決策です。もともとはDOMがロードされた後、キーアップ時にテキストエリアにサイズ変更機能を適用するために書かれました。
同じように、（すべての）divまたは指定されている場合は1つだけの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);
});あなたが本当にAJAX呼び出しの後など、DOMがロードされた後にロード、DIVで何かをする必要がある場合、あなたはそれを見つけることができます理解しやすい非常に役立つハックを使用することができ-with-の作業します...要素-前-DOM-で対応...。「DOMの準備が整う前」とありますが、Ajax挿入またはdivのjs-appendChild-whateverの後でも、同じようにうまくいきます。これがコードで、私のニーズにいくつかの小さな変更が加えられています。
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);サーバーからhtmlを読み込んでDOMツリーに挿入するときに使用できますが、使用 DOMSubtreeModifiedは推奨されません-使用するMutationObserverか、loadElement関数内の新しいコンテンツを直接検出できるため、DOMイベントを待つ必要がありません。
以下のようにイベントリスナーをアタッチできます。セレクターを持つdivが#my-idDOMに完全に読み込まれるたびにトリガーされます。
$(document).on('EventName', '#my-id', function() {
// do something
});この場合、EventNameは「ロード」または「クリック」の可能性があります。
これを試して。
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です。それは完全に無意味です。
body良いdiv