根据location.href客户端更新html页面的部分内容

时间:2014-06-07 09:54:24

标签: javascript jquery html

我试过搜索,没有找到工作。这个网站不适用于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> 
等等等等

1 个答案:

答案 0 :(得分:3)

您可以通过使用array来保存包含每个网站元数据的对象来实现此目的。当脚本为您运行create css的新link element并将其添加到head并设置document title时。

请注意,DOM内容只能在加载后才能找到(然后更改),因此会为DOMContentLoaded使用eventlistener。

这导致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>