2011-12-30 28 views
3

首先,我做了一些Google'ing並找到了IE'條件註釋',並理解它是非標準的。我也得到的印象是沒有標準的HTML「IF」所以我的問題是關於什麼我需要做什麼來達到同樣的效果(使用Javascript吧?)......包含HTML <meta>元素有條件地

我想有條件包括外部。 html文件(來自選擇的外部.html文件)。具體而言,每個外部文件只包含一行上的<meta>元素。或者,有可能在HTML文件中有多個內聯<meta>元素,並有條件地(有效地忽略其他元素)「選擇」?

基本上,我可以做些什麼來達到與這些僞代碼示例中的任何一個相同的效果嗎?

實施例使用用於外部文件的僞代碼...

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

替代實施例(再次僞代碼)用於直接選擇的備選元素...

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

注意:在所有情況下,<meta name屬性將始終爲viewport - 這只是content屬性,需要使用其他屬性進行更改。

編輯:的主要條件是客戶端的類型。一個例子是,爲了幫助正確確定Android設備上的網頁應用程序頁面的大小,您可以將content數據用於viewport,只有Android設備能夠理解。對於傳統的瀏覽器,我會爲content(例如寬度/高度)設置默認數據集。這也可以擴展到其他客戶端,如谷歌電視,iOS等。

+0

條件是什麼? – Nathan 2011-12-30 04:04:11

+3

如果您已準備好使用條件HTML,那麼您已準備好使用服務器端語言。我建議從簡單開始,比如使用PHP。 – zzzzBov 2011-12-30 04:04:42

+0

@Nathan:看我的編輯。 – Squonk 2011-12-30 04:11:12

回答

1

你可以用javascript/jQuery很容易做到這一點。

設置你的條件,然後append()head

例子:

if(//condition here){ 
    $('head').append('<meta name="viewport" content="abc" />') 
} 

else{ 
    $('head').append('<meta name="viewport" content="def" />') 
} 
+0

javascript/jquery代碼去哪裏? (看我的回答:)我的菜鳥評論)。我不清楚在哪個階段,客戶端會解析其他所有元素的''元素。 – Squonk 2011-12-30 04:16:29

+0

謝謝。我已經upvoted了,但ThinkingStiff的回答指向我'window.onload'(是的,當談到HTML時,我真的是一個新手) – Squonk 2011-12-30 04:40:34

0

,如果您使用的是服務器端,如ASP或Java中,事情就變得很多關於你更輕鬆。

我認爲你不使用服務器端編碼。

使用JavaScript獲取瀏覽器名稱(navigator.appname我猜)。

,那麼你可以使用DOM增加<head>元素內<meta ..../>標籤。

document.getElementsByTagNam('Head')。appendChild(metaChild);