Question

我正在努力让这个JavaScript工作：

我有一个HTML电子邮件链接到此页面，其中包含链接中的变量（index.html？content = email1）。 JavaScript应该替换DIV内容，具体取决于“内容”的变量是什么。

<!-- ORIGINAL DIV -->
<div id="Email">

</div>


<!-- DIV replacement function -->

<script type="text/javascript">
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
</script>

<!-- Email 1 Content -->
<script ="text/javascript">
var content = '<div class="test">Email 1 content</div>';

ReplaceContentInContainer('Email1',content);
}
</script>

<!-- Email 2 Content -->
<script ="text/javascript">
var content = '<div class="test">Email 2 content</div>';

ReplaceContentInContainer('Email2',content);
}
</script>

我做错了什么导致它无法正常工作？

Answer 1

不是将元素作为文本插入innerHTML创建DOM元素，而是手动附加它：

var obj = document.createElement("div");
obj.innerText = "Email 2 content";
obj.className = "test"

document.getElementById("email").appendChild(obj);

在此处查看此工作：http://jsfiddle.net/BE8Xa/1/

修改

有趣的阅读可帮助您决定是否要使用innerHTML或appendChild：

"innerHTML += ..." vs "appendChild(txtNode)"

Answer 2

ReplaceContentInContainer调用指定不存在的ID，唯一的ID是电子邮件，以及两个脚本如何调用，如果它们在示例中同样的apge中，第二个（具有更正的ID）将始终覆盖第一个也是你将内容变量声明两次是不允许的，页面中的多个脚本块共享同一个全局命名空间，因此任何全局变量都必须唯一地命名。

Answer 3

大卫关于你的DOM脚本无法正常工作的资金：那里只有一个“电子邮件”ID，但你引用的是“Email1”和“Email2”。

从查询字符串中获取content参数：

var content = (location.search.split(/&*content=/)[1] || '').split(/&/)[0];

Answer 4

我注意到在调用“ReplaceContentInContainer”后你正在关闭“}”。我不知道这是你的完整问题，但肯定会导致javascript无法正确解析。删除结束“}”。

关闭“}”，您将关闭一个从未打开过的代码块。

Answer 5

首先，解析查询字符串数据以找到要显示的所需内容。为此，请将此功能添加到您的页面：

<script type="text/javascript">
function ParseQueryString() {
    var result = new Array();
    var strQS = window.location.href;
    var index = strQS.indexOf("?");
    if (index > 0) {
        var temp = strQS.split("?");
        var arrData = temp[1].split("&");
        for (var i = 0; i < arrData.length; i++) {
            temp = arrData[i].split("=");
            var key = temp[0];
            var value = temp.length > 0 ? temp[1] : "";
            result[key] = value;
        }
    }
    return result;
}
</script>

第二步，在页面中包含所有可能的DIV元素，最初使用display: none; CSS隐藏，如下所示：

<div id="Email1" style="display: none;">Email 1 Content</div>
<div id="Email2" style="display: none;">Email 2 Content</div>
...

第三步也是最后一步，在页面加载中（加载所有DIV元素后包括占位符）读取查询字符串，如果给出content，则将所需DIV的内容放入“main” div ..这是必需的代码：

window.onload = function WindowLoad() {
    var QS = ParseQueryString();
    var contentId = QS["content"];
    if (contentId) {
        var source = document.getElementById(contentId);
        if (source) {
            var target = document.getElementById("Email");
            target.innerHTML = source.innerHTML;
        }
    }
}

Answer 6

这个怎么样？ Hacky但是有效......

<!-- ORIGINAL DIV -->
<div id="Email"></div>

<script type="text/javascript">
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
var txt = document.createTextNode(content); 
container.appendChild(txt);
}

window.onload = function() {
var args = document.location.search.substr(1, document.location.search.length).split('&');
var key_value = args[0].split('=');
ReplaceContentInContainer('Email', key_value[1]);
}
</script>

根据从另一个HTML文件发送的变量替换DIV内容

6 个答案: