Question

我正在构建网页仪表板示例，其中两个div中的内容应根据所选业务流程而变化。我的示例页面为here。

左侧的分部显示特定html页面的内容，其中包含所选业务流程的KPI（供应，制造，仓库等）。

右侧的分部包含聊天窗口小部件，我希望每个业务流程都是个人（供应团队的供应聊天，财务团队的财务聊天等）。

Leftside部门的html内容正在改变，但是右边的部门内容发生了变化，存在一些问题。最初它加载财务聊天。选择“供应”时，聊天框会消失。注意：更改内容（html和聊天）仅针对两个业务领域创建 - 财务和供应。

更改聊天窗口小部件的代码是：

function SetChatSupply() {
var divObject = document.getElementById('div_right');
var newContent = '<div id="chatwee_supply"></div>';
divObject.innerHTML = newContent;
};
function SetChatFinance() {
var divObject = document.getElementById('div_right');
var newContent = '<div id="chatwee_finance"></div>';
divObject.innerHTML = newContent;
};
function SetScriptSupply () {
var body = document.getElementByTagName('body')[0];
var newScript = document.createElement('script');
newScript.src = 'http://repository.chatwee.com/scripts/069673da978e699031ff2031b4664ff2.js';
newScript.type = 'text/javascript';
newScript.charset='UTF-8';
body.parentNode.appendChild(newScript);
};
function SetScriptFinance () {
var body = document.getElementByTagName('body')[0];
var newScript = document.createElement('script');
newScript.src = 'http://repository.chatwee.com/scripts/6cc6797833fd98149c6e39d505b57ac2.js';
newScript.type = 'text/javascript';
newScript.charset='UTF-8';
body.parentNode.appendChild(newScript);
};

有人可以仔细查看我的代码，并提供一些线索，告诉我应该在哪些方面更正以使聊天窗口小部件更改工作..？

谢谢！：）

Answer 1

我猜问题是用于获取body元素的方法不正确。应该是这样的：

var body = document.getElementsByTagName('body')[0];

请注意复数形式的Elements字。我建议你使用：

var body = document.body;

UPDATE1：

应该更正另一件事 - 您正在向html标记添加脚本，但这不起作用，因为脚本仅允许在body和head部分中使用。另外还有一件事要尝试：

body.appendChild(newScript);

但事实上，每次单击按钮时都不需要添加脚本。为什么不在加载网站时加载脚本，单击时只需从该脚本调用函数？

UPDATE2：

好的，鉴于要求我们无法更改脚本，我建议这个有点丑陋的解决方案（不确定它是否会起作用）：

function SetChatSupply() {
    var divObject = document.getElementById('div_right');
    var newContent = document.createElement('div');
    newContent.setAttribute('id', 'chatwee_supply');
    var newScript = document.createElement('script');
    newScript.src =  'http://repository.chatwee.com/scripts/069673da978e699031ff2031b4664ff2.js';
    newScript.type = 'text/javascript';
    newScript.charset='UTF-8';
    divObject.appendChild(newContent);
    divObject.appendChild(newScript);
};

因此，我们的想法是将您的两种方法（添加div和添加script）合并为一个（不再需要函数SetScriptSupply），因此每次按下链接时，您覆盖div_right的全部内容，重新加载并执行脚本。你应该对finance聊天做同样的事。

使用javascript动态更改div内容和脚本

1 个答案:

UPDATE1：

UPDATE2：