根據從另一個HTML文件發送的變量替換DIV內容

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;隱藏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的內容為“主”分區..這里是必需的碼：

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>