noscript section being read by dolphin

StackOverflow https://stackoverflow.com/questions/12778166

Question

Dolphin Browser and the Default Android Browser are reading the <noscript> section in the head of my page even though javascript is turned on in those browsers. This causes the content of those pages not to be rendered.

In the head I link to a a css stylesheet that sets display to none for anything inside a div on page when javascript is turned off in the browser. It does this by residing inside a nonscript element, so the stylesheet is only read if there is no javascript.

This works for all desktop/laptop browsers I tested (not tested on mac which I don't have access to). It works on Android with Firefox and Opera. I have cyanongenmod 7 only so no Google Chrome for me.

However when it comes to Dolphin and the default Android browsers, they read the css stylesheet that resides in the noscript section and pretty much the whole page/site is not rendered in these browsers.

I have proven that this is what is happening by deleting the stylesheet link from the head section and the page renders correctly in those browsers.

Is there some way to get these browsers to respect the noscript tags in the head section?

UPDATE: This is using HTML5 - noscript in the head is allowed: http://www.w3.org/TR/html5/the-noscript-element.html#the-noscript-element

<!DOCTYPE html>
<html>
<head>
        <noscript>
            <link href="${facesContext.externalContext.requestContextPath}/css/no_javascript.css" rel="stylesheet" type="text/css" />
            <!-- this link is being read even if javascript in enabled in dolphin -->
        </noscript>

</head>
<body>
    <noscript>
        stuff in this noscript element works correctly
    </noscript>

    <div class="no_javascript_disapear">

        page full of stuff not being rendered because 
        dolphin browser is not respecting the noscript 
        tags in the head.

    </div>
</body>
</html>

// css in the noscript tag:
.no_javascript_disapear {display:none;}
Était-ce utile?

La solution

Maybe you can use javascript to remove that stylesheet?

Read this question for how to Access Contents of <noscript> with Javascript

Otherwise, you can add a title to your no-js stylesheet:

<link title="noJsStylesheet"  href="....css" rel="stylesheet" type="text/css" />

And use this function to remove it:

for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("title") == 'noJsStylesheet') a.disabled = true;
}

But i'm really not sure if it'll work on this specific Dolphin version.

Autres conseils

According to HTML specifications issued as W3C recommendations, the noscript element is allowed inside body only. Browsers may allow it in the head too, but you can’t count on it. Just saying that you use HTML5 does not change this a bit; browsers do what they do, possibly implementing parts of HTML5 drafts at times.

The HTML5 draft generally recommends against using noscript at all: “The noscript element is a blunt instrument. Sometimes, scripts might be enabled, but for some reason the page's script might fail. For this reason, it's generally better to avoid using noscript, and to instead design the script to change the page from being a scriptless page to a scripted page on the fly” (followed by an example of this).

So the best approach would be progressive enhancements: Design the page first so that it works without scripting. Then, add scripting in a non-disruptive way. This could involve adding some CSS rules via scripting (which would be more natural than removing some).

But if you need a quick fix, you might consider adding, right after the link element that is now inside noscript, a script element that contains code for immediately removing that element from the document tree.

By the way, my good old Android 2.3.5 default browser seems to honor noscript inside head.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top