根据 location.href 客户端更新部分 html 页面 [关闭]答案

【问题标题】：Update parts of an html page based on the location.href client-side [closed]根据 location.href 客户端更新部分 html 页面 [关闭]
【发布时间】：2014-07-28 13:24:40
【问题描述】：

我尝试过搜索，但没有找到任何作品。该站点不适用于 php，我知道如何使用 php，但我需要任何其他方式。

我只想要一个简单的 IF THEN 语句来说明如果网站是 www.a.com 那么“这个样式表”“这个页面标题”“这个标志”等等。我将通过页面多次使用 if 函数.如果站点是 a.com，则此图像，此文本等。如果是 b.com，则一切都不同。

我还希望它只识别域本身，所以如果在 a.com/thispage.html 上，它仍然会加载正确的数据。

原因是，我有两个站点指向同一个文件夹，即商店、相同产品等。但是我们将产品作为“a”和“b”进行营销。所以我只想查看用户在哪个站点上并获取有关该站点的正确信息。

这是我想出的，但没有生成所需的html。

<script>
window.onload = function ()
var element = document.getElementbyId('idElement');
if (location.href == "a.com") 
{
  <link href="/landing.css" rel="stylesheet" type="text/css" />
}
if (location.href == "b.com") 
{
   <link href="/landing2.css" rel="stylesheet" type="text/css" />
}
</script> 

<script>
if (location.href == "a.com") 
{
   <title>AAAAAAAAAAAAA</title>
}
if (location.href == "b.com") 
{
   <title>BBBBBBBBBBBBB</title>
}
</script> 

<script>
if (location.href == "a.com") 
{
   <img src="a.png">
}
if (location.href == "b.com") 
{ 
   <img src="b.png">
}
</script>

等等等等等等

【问题讨论】：

@Jan 不，它可能会被问得很糟糕，但它不会太宽泛，这是肯定的。

标签： javascript jquery html

【解决方案1】：

您可以通过array 来实现此目的，该array 包含一个包含有关每个站点的元数据的对象。当脚本运行 create 时，为 css 创建一个新的 link element 并将其添加到 head 并设置 document title。

请注意，DOM 内容只有在加载后才能找到（然后更改），因此需要为DOMContentLoaded 使用事件监听器。

这导致在 html 脚本标签中实现如下：

<html>
<head>
<title>
NotSet
</title>
<script>
(function () {
    "use strict";
    // have an array sites with data
    var sites = [{
        url: 'a.com',  // if location.href contains this
        title: 'AAAAAAAAAAAAA', // use this title
        css: '/landing.css', // use this css file
        images: [{id: 'idOfImage', src: 'a.png'}] // replace those ids with src 
    }, {
        url: 'b.com',
        title: 'BBBBBBBBBBBBB',
        css: '/landing2.css',
        images: [{id: 'idOfImage', src: 'b.png'}]
    }
        ],
        site, siteIndex, NOT_FOUND = -1;

    //create a link for the css and add it
    function addLink(css) {
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = css;
        document.head.appendChild(link);
    }

    // find the img tags by id and set the src
    function setImages(images) {
        var image, imgIndex, img;
        for (imgIndex = 0; imgIndex < images.length; imgIndex = imgIndex + 1) {
            image = images[imgIndex];
            img = document.getElementById(image.id);
            if (img !== null) {
                img.src = image.src;
            }
        }
    }

    // iterate over our sites array
    // at the end site will have an object or is null (if no match found)
    for (siteIndex = 0; siteIndex < sites.length; siteIndex = siteIndex + 1) {
        site = sites[siteIndex];
        // is url found in location.href
        if (window.location.href.indexOf(site.url) > NOT_FOUND) {
            break;
        }
        site = null;
    }

    // if we have a site do what is needed
    if (site !== null) {
        addLink(site.css);
        // IE9 or up...
        document.addEventListener("DOMContentLoaded",
            function () {setImages(site.images); }
            );
        // set the title
        document.title = site.title;
    }
}());
</script>
</head>
<body>
Does this work?
<img id="idOfImage" src="none.png" />
</body>
<html>

【讨论】：