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

Update parts of an html page based on the location.href client-side

本文关键字：客户端 href 位置 更新 html      更新时间：2023-09-26

我试过搜索，没有找到工作。网站这是不与php工作，我知道如何与php，但我需要任何其他方式。

我只是想要一个简单的IF然后声明说，如果网站是www.a.com然后"这个样式表"这个页面标题"这个标志"等。我将在页面中多次使用if函数。如果网站是。com，这个图片，这个文本等等，如果是。com，那么一切都是不同的。

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

原因是，我有两个网站指向相同的文件夹，这是一个商店，相同的产品等，但我们营销的产品作为"a"answers"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>

可以通过使用一个数组来保存每个站点的元数据对象来实现这一点。当脚本运行时，您将为css创建一个新的link元素，并将其添加到头部并设置文档标题。

请注意，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>
相关文章：