Is there anyway to change tag's attributes during run time?

Question

I want to add the manifest attribute during run-time, so the I can control when the Appcache will be downloaded.

Ex: When a user is logged into the application properly,

<html>
// page content
</html>

changes into:

<html manifest="myapp.manifest">
// page content
</html>

Is there anyway I can achieve this using javascript, jquery or anything? What I want to is to control when the Appcache will be downloaded conditionally.(I have already read about having another html inside an iFrame.)

Felix Kling · Answer 1 · 2014-03-27T05:50:14.620

9

According to the specification, changing the manifest attribute after the document loaded has no effect.

You can still access the html element and change the attribute value, via document.documentElement:

document.documentElement.setAttribute('manifest', 'myapp.manifest');

It just won't do anything.

edited Mar 27 '14 at 05:50

answered Mar 27 '14 at 05:32

Felix Kling

795,719
175
1,089
1,143

2

The question is, does it matter? The appcache manifest file tells the browser what to cache, and I'm not sure adding a reference to that file after the page has loaded will affect the browser cache in any way, I would probably think it wouldn't, and that the manifest file is only loaded on pageload, but have never tested this. Anyway, +1, this does add the attribute, as asked for! – adeneo Mar 27 '14 at 05:45
1

@adeneo: That's what I meant when I said I don't know if it has any effect. You phrased it better :) Honestly, I'm too lazy right now to test it. – Felix Kling Mar 27 '14 at 05:46
@FelixKling I'm really interested that attr works but not prop why? http://jsfiddle.net/YY4BL/2/ – Bhojendra Rauniyar Mar 27 '14 at 05:50
1

@C-link: First of all because **attribute**-selectors don't take properties into account and secondly because `HTMLHTMLElements` simply don't have such a property. – Felix Kling Mar 27 '14 at 05:51
@C-link - What felix said, the browser generally reads the HTML and creates the DOM, where objects are created, and properties set based on the HTML and the browser defaults. In other words, if the HTML tag doesn't natively have a manifest property, adding one later won't help, as that's not what the browser reads, the browser reads the HTML, and the attributes added to the HTML elements. – adeneo Mar 27 '14 at 05:55

score 3 · Answer 2 · answered Mar 27 '14 at 05:34

3

You can use .attr():

Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.

$('html').attr('manifest','myapp.manifest');

answered Mar 27 '14 at 05:34

Felix

37,892
8
43
55

Jukka K. Korpela · Answer 3 · 2014-03-27T05:58:27.623

Normal ways to add an attribute to an element can be used, e.g.

document.documentElement.setAttribute('manifest', 'foo.appcache');

(As @FelixKing points out in a comment, assigning to document.documentElement.manifest does not work, by the specs, since manifest is not defined in the DOM. I was first misled by Chrome’s behavior in this issue.)

However, this has no effect. HTML5 CR says: “The manifest attribute only has an effect during the early stages of document load. Changing the attribute dynamically thus has no effect (and thus, no DOM API is provided for this attribute).”

(Well, it has the effect of being there, so you could use the attribute in styling, retrieve the attribute value, etc. But nothing that would cause application cache operations.)

Nice find about the processing of the attribute. But either way, `HTMLHTMLElement`s don't have a `manifest` property, so this is not the right way to set it anyway. — Felix Kling, Mar 27 '14 at 05:49

score 1 · Answer 4 · answered Mar 27 '14 at 05:33

1

Try this:

document.documentElement.setAttribute('manifest', 'myapp.manifest');

From the docs:

document.documentElement

Returns the Element that is the root element of the document (for example, the element for HTML documents).

answered Mar 27 '14 at 05:33

Rahul Tripathi

168,305
31
280
331

score 0 · Answer 5 · answered Mar 27 '14 at 05:34

0

Try this by jQuery.

$('html').attr('manifest', 'myapp.manifest');

answered Mar 27 '14 at 05:34

Rakesh Kumar

2,705
1
19
33

score 0 · Answer 6 · answered Jun 25 '14 at 21:37

It may not be possible to effectively add the manifest attribute, but it might be possible to remove it and by that you may achieve the same result.

To disable appcache, I use this:

window.console.warn('removing appcache');
window.document.documentElement.removeAttribute('manifest');

Please be carefull, this may not always work!

Is there anyway to change tag's attributes during run time?

6 Answers6