I have several iframes on the page. There are some elements with classname test inside of them. I need to set any style to them.
When I have only one iframe, I can use next construction:
$('#iframeId').contents().find('.test').css({background: '#f00'});
But I have several iframes, so it would be great not to set concrete iframe and use construction like:
$('.test').css({background: '#f00'});
But it doesn't work, of course.
I used native getElementsByClassName before, but it doesn't work in IE8, where defect appears.
It may be stupid question, but.. Is there any construction like:
$(getElementById('something')).css({background: '#f00'});
It would be very helpful. I mean, wrap JavaScript object with jQuery and then use jQuery methods with them.
Update: I solved this problem with next construction:
[].forEach.call(document.getElementById('something').querySelectorAll('.test'), function (el) {
el.style.backgroundColor = '#f00';
});
But it's still doesn't work for IE8.
You should try some thing like this
$("iframe").each(function(index){
$(this).contents().find('.test').css({background: '#f00'});
});
Hope this will help you.
You may be running into one of two issues:
1) You are generally not able to modify the contents of iFrames returned from external domains, though that may not be the case here. If your iframes are pointing within your domain you should be fine.
2) ie8 has know problems with the "innerHTML" property, which jQuery's .css may rely on. instead, try using DOM methods:
document.getElementById("yourIframe").contentWindow.document.body.getElementById("innerIframeElement").setAttribute("style", "background:'#f00';"
Related
Uhm, I've got this script but it does not work.
It's all about this line: document.getElementById('thetest').addClass('superspecial');
As soon as the class should be added (but it isn't) the whole script quits...
Does anybody know why?
Should be:
jQuery('#thetest').addClass('superspecial');
or
document.getElementById('thetest').className += ' superspecial';
document.getElementById doesn't return a jQuery element.
That's why you get has no method error.
I know this is a bit of an old post by now, but I ran into it myself and I used a method that wasn't named before to solve it.
Instead of using
document.getElementById("name").className+='superspecial';
I used
document.getElementById("name").classList.add('superspecial');
After some research it seems that this is a fairly new way to do it that isn't supported in a lot of browser versions other than the latest. Browser requirements to use this functionality are as described here:
https://www.w3schools.com/jsref/prop_element_classlist.asp
I don't know the exact difference between the two solutions, but it seems to me that getting the classList and adding to it with an existing function would be the preferable option. Especially as += is a general method of adding things to eachother that doesn't always have to work the way you expect it to.
I'm working on a Google Chrome extension that manipulates a webpage, but after it is either partially loaded (the DOM) or fully loaded (with images).
It seems that many sites nowadays use the
<!DOCTYPE html>
declaration, or some variation of it, but many others do not. The question is mainly about HTML doctypes...I'm not sure about the others.
Is it safe to assume that if a webpage does not have the DOCTYPE declaration, then $(window).load(); will not be fired?
In the beginning I was using $(document).ready(); (for when the DOM is loaded), but later switched to $(window).load(); (to let the images load too).
The thing is, now $(window).load(); does not seem to work if there is no DOCTYPE. $(document).ready(); seems to work on all pages, regardless of whether a DOCTYPE is declared or not.
Maybe this can be useful for others with this same issue. I searched a bit and didn't find a decisive answer. It seems that I will end up using something like this:
if (window.document.doctype != null) {$(window).load(checkEntries);}
if (window.document.doctype == null) {$(document).ready(checkEntries);}
I guess my question is... Is this normal to have to check for the DOCTYPE to know which event to use? Or am I missing something here?
Basically, why does $(window).load(); seem not to fire if there's no DOCTYPE declaration?
Basically, you shouldn't be using $(window).load(), since it's not fully supported. If you really need it, then your solution above is the best you can do. The jQuery page sums up the caveats nicely:
Caveats of the load event when used with images
A common challenge developers attempt to solve using the .load()
shortcut is to execute a function when an image (or collection of
images) have completely loaded. There are several known caveats with
this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
URL: http://api.jquery.com/load-event/
The .ready() method is generally incompatible with the <body onload=""> attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.
I am working on a website that currently uses the old style frames. I want to go through a replace some javascript DOM calls because I am running into cross-browser issues. This is what I would like to replace.
window.parent.frames['topdisplay'].document.FORMSV2DISPLAY.action = 'what ever action';
In the above code my problem is that the 'document.FORMSV2DISPLAY' part doesn't work in IE I have to replace that part with document.form(0) and then of course neither of those work correctly in Chrome or Safari.
I would like to use jquery to find the form named FORMSV2DISPLAY and then perform my usual actions and submits.
I have tried things like
$(this).find('FORMSV2DISPLAY').action
$(parent).find('FORMSV2DISPLAY').action
$('topdisplay').find('FORMSV2DISPLAY').action
none of these return the same thing as the javascript DOM calls I am trying to replace. I am very new to jquery and help or understanding is greatly appreciated.
to set the action:
$('#topdisplay').find('#FORMSV2DISPLAY').attr('action', 'whateveraction');
I've searched for an answer and no solution seems to fix this problem, so hopefully stating it specifically will help me find a solution.
I'm trying to read cssText of the first stylesheet using document.styleSheets[0].cssText, but it always returns undefined. I do have a stylesheet and it's visibly noticeable, but JavaScript doesn't seem to recognize it.
This did, however, work when I included the stylesheet within the page using <style>. I don't see why this would change when using <link>, though. Not only is it placed before the script, but it even returns undefined when using javascript:alert(document.styleSheets[0].cssText) in the omnibar after the page is fully loaded.
Thanks for any help.
Edit: This applies to any method with document.styleSheets[0], including those of which are supposed to work on multiple browsers and have worked for me prior to using <link>. For example: document.styleSheets[0].cssRules[0].selectorText
According to quirksmode.org, document.styleSheets[n].cssText is only supported in IE.
The form
document.styleSheets[n].cssRules[m].cssText
seems to be more widely supported, so you could just loop over that and build a string from the individual rules. (Although you have to replace cssRules with rules for IE).
I thing that this answer is out of time, but it could be useful for someone else.
The result can be "undefined" due 2 different reasons:
a) In some browsers, the property "cssRules" does not work (in accord with http://www.javascriptkit.com/domref/cssrule.shtml, only for supported in NS/ Firefox). For the other browser, you should use the property "rules", instead.
You can solve the problem using something like:
if (document.styleSheets[0].cssRules)
crossrule=document.styleSheets[0].cssRules[0]
else if (document.styleSheets[0].rules)
crossrule=document.styleSheets[0].rules[0]
to extract the rule and, afterwards, to extract the name of selector:
document.styleSheets[0].cssRules[0].selectorText
b) After the overpassing of the issue a), you may have another problem: The rules that starts with a #, like #import of #font-face, as considered as rules. However, their "selectorText" is undefined. So, you must have a way of skip them. I am working on it, right now. But I have not found yet a solution. Anyway, it is an help to know way it is happening.
Hope this helps
I am studying somebody else jquery script, and I noticed he is opening a tag without closing it, but it also seems that browsers does not care (Not yet tested with IE)
it is written :
$('#mydiv').append('<ul>')
But there is nowhere a
.append('</ul>')
The script does not close the list, but browsers do it automatically (I just did an 'inspect element' in the browser).
Is that a 'legal' behavior, or one should always close a tag in a javascript autogenerated content ?
To do it properly, you should be appending:
$('#mydiv').append('<ul></ul>')
Yes browsers will handle it (specifically the .innerHTML implementation handles it, not jQuery), at least the major ones, but why not be safe in all cases and use valid markup?
$('#mydiv').append('<ul>')
...still calls .innerHTML, not createElement, only in $('<ul>') is document.createElement() called. As I said originally, the browser handles it with .append(), not jQuery and not document.createElement (which doesn't take syntax like this anyway).
You can see test/play with what I mean here
Short answer: you should.
Long answer that lead to the short answer:
When you say .append('<ul>'),
or even .append('<ul></ul'), behind the scenes jQuery calls document.createElement and the browser knows what to do.
It's not like jQuery actually puts that string of HTML anywhere, but rather parses it and creates the necessary DOM elements
UPDATE-
As Nick pointed out, this might not always be the case. Relevant source: init
If you pass it just ul, it just calls createElement. If the html string is more complicated, it will go into buildFragment which is more complicated than that.
Based on this, I would say the best/fastest way to create a single element thru jQuery, is to do something like
$('<ul>').appendTo($target);
UPDATE 2-
So apparently jQuery only calls createElement in some methods, but append ends up calling clean which has a regex that closes tags. So either way, you're safe, jQuery saves you as usual.
Relevant source:
...
} else if ( typeof elem === "string" ) {
// Fix "XHTML"-style tags in all browsers
elem = elem.replace(rxhtmlTag, "<$1></$2>");
...
UPDATE 3- So it turns out jQuery doens't fix anything for you when you call append, and it just injects the string into a temporary div element. Seems like most browsers know how to deal with the HTML even if not closed properly, but to be save it's probably best to close it yourself! Or if you're feeling lazy, do something like .append($('<ul>')) which doesn't use innerHTML