Html div on load event for a dynamically added div element
How i can make some thing like this?
<div id='myDiv' onload='fnName()'></div>
can't use
window.onload开发者_运维技巧 = function () {
fnName();
};
or
$(document).ready(function () {fnName();});
the div element is dynamic. The div content is generated by xml xsl.
Any ideas?
You can use DOM Mutation Observers
It will notify you every time the dom changes, e.g. when a new div is inserted into the target div or page.
I'm copy/pasting the exmple code
// select the target node
var target = document.querySelector('#some-id');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }
// pass in the target node, as well as the observer options
observer.observe(target, config);
// later, you can stop observing
observer.disconnect();
The onload attribute probably wouldn't fire on the <div> if you're injecting it dynamically (as the document is likely already loaded, but maybe it'd still work...?). However you could either poll for the element by simply doing something like this (similar to YUI's onContentAvailable):
// when the document has loaded, start polling
window.onload = function () {
(function () {
var a = document.getElementById('myDiv');
if (a) {
// do something with a, you found the div
}
else {
setTimeout(arguments.callee, 50); // call myself again in 50 msecs
}
}());
};
Or you could change the markup (I know nothing about XSL) to be something like this:
Earlier on in the page:
<script type="text/javascript">
function myDivInserted() {
// you're probably safe to use document.getElementById('myDiv') now
}
</script>
The markup you generate with XSL:
<div id="myDiv"></div>
<script type="text/javascript">
myDivInserted();
</script>
It's a bit hacky but it should work.
If you're not already using jQuery there's no reason to start using it just for this, you can write:
window.onload = function () {
fnName();
};
You could use jQuery. The following code would be place in your <head> tags.
$(document).ready(function() {
// Your fnNamt function here
});
EDIT
Kobi makes a good point
You could also write $(document).ready(function(){fnNamt();});, or more simply, $(document).ready(fnNamt);, or even $(fnNamt)
Without jQuery with plain JS eg:
<script type="text/javascript">
function bodyOnLoad() {
var div = document.getElementById('myDiv');
// something with myDiv
...
}
</script>
<body onload="bodyOnLoad()">
....
<div id='myDiv'></div>
....
</body>
I had the same Issue, and after searching I found this.
In my case, the javascript appends the head of the index html to load a tab content html file, and onload I want to add that tab to the dom, display it and make other js stuff to change the tabs style.
I added the line with .onload = function(event) {...}
var link = document.createElement('link');
link.rel = 'import';
link.href = 'doc.html'
link.onload = function(event) {...};
link.onerror = function(event) {...};
document.head.appendChild(link);
This worked like a charm, and maybe it helps some other researcher :)
I found it on HTML5 Imports: Embedding an HTML File Inside Another HTML File
How about using jQuery/ready(..) for this?
Like here: http://api.jquery.com/ready#fn
In the context of your question,
$(document).ready(function () {fnNamt();});
I would suggest you to use jQuery.
Steps:
1. Download Jquery library from here http://code.jquery.com/jquery-1.5.min.js .
2. in your HTML, head section create a script tag and use this code below.
$(document).ready(function() {
// write your code here..
});
I'd suggest circle-style func:
SwitchFUnc = false;
function FuncName(div_id) {
var doc = window!=null ? window.document : document;
var DivExists = doc.getElementById(div_id);
if (DivExists) {
//something...
SwitchFunc = true; //stop the circle
}
}
while (SwitchFunc!=true) {
FuncName('DivId');
}
加载中,请稍侯......
精彩评论