How can I have a script operate on parts of a page that haven’t loaded yet? (Or won’t load until a user interacts with the page, like scrolling.)
The parts of the page are called, I guess, after an ajax request.
I am using jquery (but don’t require it), so I have tried putting my code in:
$(document).ready(function() {
// my code
});
and:
$(window).load(function() {
// my code
});
but neither works.
You can’t, really. If there are DOM elements that are added after the page loads, I believe there needs to be some kind of “init” to let jQuery (and JS in general) know that there are new elements in the page.
HTH,
There is MutationObserver
But be warned, I have found that it can be a memory hog to the point where it can cause a hang.
You aren’t clear by what you mean affect parts? Do you meant listeners and events?
In any case, first your script should be the very last thing on the page, just before your </body> tag. When you do this waiting for window load isn’t that important because the script is the last thing loaded. Though it does come in handy sometimes.
If you’re talking about listeners that are loaded dynamically by another script or maybe ajax, do something like:
$(document).on('click', '.thisclass', function() {
// this can be used on any .thisclass
// no matter when its loaded
});
instead of
$('.thisclass').click(function() {
// This can only be used on .thisclass elements
// that have been loaded before this was declared
});
[quote=“mawburn, post:4, topic:112177”]```
$(document).on(‘click’, ‘.thisclass’, function() {
// this can be used on any .thisclass
// no matter when its loaded
});
A qualifier though - the above is only effective on additional content that jQuery has added to the page.
If non-jQuery techniques are used to add the content, you'll miss out on triggering for those.I’m not sure if I follow. Did I do this wrong?
Aha - it seems that jQuery have improved on that past issue - that’s very nice to see.
Thanks for all of the information, everyone.
@wolfshade What sort of init program are thinking about? All I could think of was the jquery ready/load issues. I guess I don’t know how to start an init program that would do what I want.
@Mittineague I will look into mutation observers. Looks like it will be a pretty deep topic for me, currently.
@mawburn
The script I am writing is a way to alter the appearance of Disqus comments. It’s a greasemonkey script. An example of the disqus comments would be here: http://techcrunch.com/2010/08/30/techcrunch-disqus-community/. Just changing the color of the text would be an achievement right now! I can change it on the site itself but not in disqus comments as they aren’t there when the page loads, and become available only when you scroll over them.
Never used Disqus on a page. But it’s an iFrame.
I’d start with this trying to change the CSS in the iFrame.
http://stackoverflow.com/a/13959836/1312971
If you can, add something like:
.post-message {
color: red;
}
And see if it works. Add a color: red !important; if it doesn’t.
I have no idea how you’re including this in the page though… From looking at the TC source it looks like they’re loading it with a dynamic script that adds it to the page. Nothing too fancy I don’t think. Which means you should be able to accomplish what’s in the SO link by wrapping it in a $(function() { }); (which is a shortcut for the $(document).ready() you used above). If adding the content to the iFrame doesn’t work, then idk where to go from there. You’re going to have to provide more information about how it’s included into the page.
Here is what I am using, based on your stack overflow link and a couple others I tried looking through once you pointed out the iframe issue. (This one was pretty helpful: http://stackoverflow.com/questions/18369410/how-to-add-javascript-code-into-existing-iframe-using-jquery )
The iframe for disqus comments has an id of #c. The idea is to find the body tag of the iframe, and attach my script to the bottom of it. I thought I’d start with a basic alert, because if I could get that working the rest should be much easier.
I also have never used the disqus system so I do not know much about the code itself other than what I can inspect.
var scriptTag = "<script>alert('the alert works!')<\/script>";
$("#c").contents().find("body").append(scriptTag);
I also tried:
$('#c').load( function() {
$('#c').contents().find('body').append(scriptTag);
});
Neither worked.
Is the iframe your iframe?
You can’t really communicate with an iframe unless its your iframe on your domain and then you could simply change the styles in the iframe manually.
If it’s a cross domain iframe you can use ‘postmessage’ but you will still need to put code inside the iframe in order to communicate.
http://benalman.com/projects/jquery-postmessage-plugin/
http://easyxdm.net/wp/
The iframe is not my iframe. It is being delivered by disqus cdn to another page.
I am using this script in greasemonkey to manipulate 3rd party sites that use disqus, or any other sort of iframe inclusion. I think of it as a general problem that if I can solve, will help me understand how I can approach problems like this in javascript in the future. I am “applying” the script to every page on the internet, so whether the page is being delivered from techcrunch or disqus, the script should search for an element with the id #c and try to proceed from there. Does that answer your question? Unfortunately, I can’t access the iframe directly, if by “my iframe” you mean I can access the original page’s html source. I have to access it through the page that is including the iframe.
I will read the links you posted later today and see what I can do.
If the iframe is not yours, or you don’t have access to the actual source code of the iframe content (i.e. so that you can put code inside it), or the iframe source hasn’t been set up to communicate then you cannot alter it. Just because you include a url in an iframe does not mean that you can alter any of the code in the iframe because that means you could display a site that was not yours and change the information within which would be very bad.
This disqus article lists what you are able to do with the comments.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.