如何為照片制作自定義背景圖像 <div> 在里面 <head> 基於從URL傳遞的變量？

Question

我試圖基於能夠通過URL傳遞變量的方式允許非常原始的自定義。 例如，如果他們通過以下方式來到我的網站：

只要可行，我就可以將圖像顯示為標簽或背景圖像，稱為image-a.png

但是，如果它們具有不同的價值：

http://my.stackexchange.com?c=beta

然后圖像是不同的。

這在服務器端會更容易一些，但是想知道是否有辦法通過使用例如我可以在自定義標頭中調用的javascript來做到這一點。 還是其他一些想法？

是的，這已經放置在meta.stackexchange.com上，但是我想知道是否有來自更廣泛的編程社區的想法，我該如何在只能放置html的約束下實現這一點（而有限的javascript似乎）。

謝謝。

Answer 1

您可以從javascript查看get參數（在本例中為“ c”），然后使用javascript將img標簽的src更改為所需的任何內容。

Answer 2

簽出JQuery ... jquery.com

這是一個可能與您需要的人相近的例子。 http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html

這向您展示了如何獲取參數...然后您可以使用簡單的JQuery加載差異圖像。

Answer 3

首先使用jquery獲取您的URL參數...

獲取轉義的URL參數

...或者只是javascript ...

如何獲取JavaScript中的查詢字符串值？

現在您有了參數，可以使用jquery修改圖像標簽src參數...

使用jQuery更改圖片來源

您也可以不使用jquery來執行此操作，但是我會走jquery路由，因為聽起來您可能有復雜的javascript需求。

Answer 4

假設您只有一個參數c ，則可以通過以下代碼行獲取它：

var c = /\?c=(.*)/.exec(document.baseURI)[1];

這應該在完美的情況下起作用：只有一個且只有格式正確的參數c 。 如果沒有參數，將引發錯誤。

一個更通用的方法可能是：

function getURLParameter(key) {
    var ret = (new RegExp('[?](\?:.*&)*'+key+'=([^&#]*)','')).exec(document.baseURI);
    return ret?ret[1]:null;
}

您可以在文檔加載時調用它並相應地更改圖像。 （盡管那部分應該很容易）