Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Including HTML <meta> element conditionally

Tags:

html

Firstly, I've done some Google'ing and found the IE 'conditional comment' and understand it's non-standard. I also get the impression there is no standard HTML 'IF' so my question is about what I need to do to achieve the same effect (Javascript perhaps?)...

I'd like to conditionally include an external .html file (from a selection of external .html files). Specifically, the external files each contains nothing but a <meta> element on a single line. Alternatively is it possible to have multiple inline <meta> elements in a HTML file and to 'choose' one conditionally (effectively ignoring the others)?

Basically, can I do something that would achieve the same as one of either of these pseudo code examples?

Example using pseudo code for external files...

<html>
    <head>
        if some-condition
            <!--#include file="meta1.html" -->
        else
            <!--#include file="meta2.html" -->
        ...
    </head>
     ...
</html>

Alternative example (again pseudo code) for selecting alternative elements directly...

<html>
    <head>
        if some-condition
            <meta name="viewport" content="abc" />
        else
            <meta name="viewport" content="def" />
        ...
    </head>
     ...
</html>

NOTE: In all cases the <meta name attribute will always be viewport - it's just the content attribute which needs changing perhaps with some other attributes.

EDIT: The main condition would be the type of client. One example is that to help correctly size web app pages on an Android device you can use certain content data for the viewport that only Android devices understand. For conventional browsers, I would set a default set of data for content (for width/height for example). This could also be expanded for other clients such as Google TV, iOS etc etc.

like image 436
Squonk Avatar asked Aug 25 '26 05:08

Squonk


1 Answers

Using Javascript:

document.head.insertAdjacentHTML( 'beforeEnd', '<meta name="viewport" content="abc" />' );

Demo: http://jsfiddle.net/ThinkingStiff/ccX5p/

like image 56
ThinkingStiff Avatar answered Aug 30 '26 06:08

ThinkingStiff



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!