Javascript：将片段添加到 DOM 时收到通知
我想要什么
我正在使用 AJAX 从服务器端加载 HTML 片段，并将其附加到文档中，并且我想要一种在片段完全添加到文档中时收到通知的方法大教堂。
我正在做这样的事情：
// Load photos.html from the server with ajax
var instance = loadPageWithAjax('photos.html')
// Wait for response
instance.success = function(response){
// Create Parent Object
// Note that I MUST create a new div in my project
var box = document.createElement('div');
box.id = 'photos-box';
// Insert html response to the box's innerHTML
box.innerHTML = response;
// Append box to the dom
document.body.appendChild(box);
}
当片段添加到 dom 中时，我想处理其中的内容，但我不能，因为我不知道片段何时实际添加到 dom 中。
我尝试过
我尝试在响应后附加一个脚本：
document.getElementById('photo-box') = response
+ '<script>alert(\'loaded\')</script>';
它已添加但没有作为脚本加载我真的不知道为什么？
然后我尝试将其附加为一个新对象，该对象部分有效：
var script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML = 'alert(\'loaded\')';
document.getElementById('photo-box').appendChild(script);
但它加载速度比片段的其他部分快。
那么当片段添加到 dom 时获得通知的正确方法是什么？
What I want
I'm loading a fragment of HTML from server side with AJAX, and I'm appending it to the document, and I would like a way to get notified when the fragment is fully added into the dom.
I'm doing something like this:
// Load photos.html from the server with ajax
var instance = loadPageWithAjax('photos.html')
// Wait for response
instance.success = function(response){
// Create Parent Object
// Note that I MUST create a new div in my project
var box = document.createElement('div');
box.id = 'photos-box';
// Insert html response to the box's innerHTML
box.innerHTML = response;
// Append box to the dom
document.body.appendChild(box);
}
And when the fragment is added to the dom I would like to work with the contents in it, but I can't because I don't know when the fragment was actually added into the dom.
What I tried
I tried to append a script after the response:
document.getElementById('photo-box') = response
+ '<script>alert(\'loaded\')</script>';
It is added but doesn't loads as a script I don't really know why?
Then I tried to append it as a new Object which partly works:
var script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML = 'alert(\'loaded\')';
document.getElementById('photo-box').appendChild(script);
But it loads faster than the other parts of the fragment.
So what is the right way to get notified when the fragment is added to the dom?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
innerHTMLsetter 和appendChild方法是同步的，因此 DOM 会立即更新。您可能希望在加载所有样式表和图像时收到通知。 （innerHTML 不适用于脚本）
这有点棘手。您必须迭代所有图像并检查它们的
已加载状态，然后向每个尚未加载的图像添加一个onload处理程序。对于样式表来说，情况更加复杂。请参阅 yepnope.js 了解可能的实现。
The
innerHTMLsetter as well as theappendChildmethods are synchronous, so the DOM is updated immediately.You probably want to be informed when all stylesheets and images are loaded. (innerHTML does not work with scripts)
This is a bit tricky. You're gonna have to iterate over all images and check their
loadedstate, then add anonloadhandler to each image that has not been loaded.For stylesheets, it's even more complicated. See yepnope.js for a possible implementation.
抱歉，我不完全理解，但如果在收到响应后触发
instance.success = function(response){}，您应该能够在document.body 之后调用函数。 appendChild(box)，这是正确的还是我离题了？Im sorry don't fully understand but if the
instance.success = function(response){}is fired once you receive the response you should be able to call a function afterdocument.body.appendChild(box), is this correct or am i way off?