Question

我在使用空div或div的新veriosn删除或替换div时遇到问题。我试图用删除$ targetname来破坏div我试图用$（＆＃34; #divname＆＃34;）替换div。替换（）我似乎错过了一些。我有一个功能绑定按钮单击，也清除textarea和该部分工作正常，但我的表单继续显示被附加但从未删除的div。以下是我的代码小提琴的链接，任何帮助表示赞赏。

http://jsfiddle.net/fNfK8/

emWindow = window.open("", null, "height=400,width=800,status=yes,toolbar=no,menubar=no,location=no");


emWindow.document.title = "Emote Builder";
emWindow.document.body.style.background = "#00214D";
emWindow.document.body.style.color = "White";

// create a form and set properties
var emForm = document.createElement('form');
emForm.id = 'emForm';
// insert into the body of the new window
emWindow.document.body.appendChild(emForm);

// add text before the input
var emoteBuildL = document.createElement('emoteBuildL');
emForm.appendChild(document.createTextNode('Emote Build Window:'));

//add linebreak
var linebreak = document.createElement('br');
emForm.appendChild(linebreak);

// add a text input
var emoteBuild = document.createElement('textarea');
emoteBuild.type = 'text';
emoteBuild.name = 'emoteBuild';
emoteBuild.id = 'emoteBuild';
emoteBuild.rows = 6;
emoteBuild.cols = 80;
emoteBuild.value = '';
emForm.appendChild(emoteBuild);

var emoteTosend = document.getElementById('emoteBuild');

//add linebreak
var linebreak = document.createElement('br');
emForm.appendChild(linebreak);

var ePreview = document.createElement('button');
ePreview.type = 'button';
ePreview.innerHTML = 'Preview Emote';
ePreview.onclick = emoteFunc;

emForm.appendChild(ePreview);
var eSubmit = document.createElement('button');
eSubmit.type = 'button';
eSubmit.innerHTML = 'Send Emote';
eSubmit.onclick = function () {
    client.send_direct("" + emoteBuild.value);
};
emForm.appendChild(eSubmit);

var eClear = document.createElement('button');
eClear.type = 'button';
eClear.innerHTML = 'Clear Emotes';
eClear.onclick = function () {
    emoteBuild.value = '';
    delete $emPreviews;

};

emForm.appendChild(eClear);

//add linebreak
var linebreak = document.createElement('br');
emForm.appendChild(linebreak);

// add text before the input
var emotePviewL = document.createElement('emotePviewL');
emForm.appendChild(document.createTextNode('Emote Previews:'));
//add linebreak
var linebreak = document.createElement('br');
emForm.appendChild(linebreak);


//add linebreak
var linebreak = document.createElement('br');
emForm.appendChild(linebreak);

function emoteFunc() {

    var emPreview = emoteBuild.value;
    emPreview = emPreview.replace(/%%(.+?)%%/g, "\<font color=\"red\"\>\"$1\"\</font\>");
    emPreview = emPreview.replace(/%%/g, "\"");
    emPreview = emPreview.replace(/\^/g, "");
    emPreview = emPreview.replace(/(\w+_him)/g, "(him/her)");
    emPreview = emPreview.replace(/(\w+_his)/g, "(his/her)");
    emPreview = emPreview.replace(/(\w+_he)/g, "(he/she)");
    emPreview = emPreview.replace(/#/g, "");
    var div = document.createElement("div");
    div.class = 'emPreviews';
    div.id = 'emPreviews';
    div.style.color = "black";
    div.style.backgroundColor = "white";
    div.innerHTML = emPreview;
    emForm.appendChild(div);
    emForm.appendChild(linebreak);
}

Answer 1

您会发现将HTML放入单独的文件并将其用作新窗口的源是非常有效的。或者，使用 document.write 向页面添加内容，例如以下内容将替换脚本开头的大约20行：

function openWin() {
  var emWindow = window.open("", null, "height=400,width=800,status=yes");

  emWindow.document.write(
    '<!doctype html><title>Emote Builder<\/title>' +
    '<style type="text/css">body{background-color: #00214D;color:White;}<\/style>' +
    '<form id="emForm">' +
    'Emote Build Window:<br>' +
    '<textarea name="emoteBuild" id="emoteBuild" rows="6" cols="80"><\/textarea>'
  );
  emWindow.document.close();
}

请注意：

var linebreak = document.createElement('br');

它在当前文档中创建了一个元素，但随后：

emForm.appendChild(linebreak);

将其附加到不同文档中的元素。你真的应该这样做：

var linebreak = emWindow.document.createElement('br');
emForm.appendChild(linebreak);

或者只是将它放在上面的HTML中。

您还在开启窗口中创建一个按钮，将其附加到表单，然后让它在开启器中调用一个函数。新窗口具有新的全局上下文，它无法访问开启者的范围。你可以这样做：

ePreview.onclick = window.opener.emoteFunc;

或类似，但您可能会发现在某些浏览器中被阻止。

我建议您重新编写该函数以首先生成所需的HTML，然后使用 emWindow.document.write 将其写入新窗口。不要忘记最后调用 emWindow.document.close 。

修改

请记住，您正在处理文档。因此，如果您仍在开启器（原始窗口）中运行脚本，则必须在子窗口中对方法的任何引用开头，并引用 emWindow ，例如：要获得对您必须使用的子窗口中的表单的引用：

function emoteFunc() {

    // Get a reference to the form in the child window
    var emPreview = emWindow.document.getElementById('emoteBuild');
    ...

    // Create a div in the child window to append to it
    var div = emWidnow.document.createElement('div');
    ...

    // The form and div are in the same document, so just append
    emForm.appendChild(div);

    // Create a BR element in the child and append it
    emForm.appendChild(emWindow.document.createElement('br'));
    ...
}

编辑2

以下是在子项和开启者之间发送数据的简单示例。

<script>

var win;

function newWin(){
    win = window.open('','','');

    win.document.write(
      '<title>new window<\/title>' +
      '<script>function getValue() {' +
      'document.getElementById("i0").value = opener.document.forms.f0.i0.value;}<\/script>' +
      '<input id="i0">' +
      '<input type="button" onclick="getValue()" value="Get value from opener">' +
      '<input type="button" onclick="opener.getValue()" value="Get value using function in opener">'
    );

    win.document.close();
};

function getValue() {
console.log('getValue called');
console.log(win.document.getElementById('i0').value);

  win.document.getElementById('i0').value = document.f0.i0.value;
}

function sendValue(value) {
  win.document.getElementById('i0').value = value;
}

</script>

<button onclick="newWin()">Open child</button>
<form id="f0">
  <p>Value to get from child
  <input name="i0" value="value in opener">
  <input type="button" value="Send value" onclick="sendValue(this.form.i0.value)">
</form>

你会发现（至少在IE中）你可以：

调用子窗口中的函数以从开启者
在开启者中调用一个函数向孩子发送一个值
从另一个窗口调用一个函数，

但是你不能在另一个窗口中调用一个更新当前窗口的函数，这是一个太多的跳跃。

因此，您想要从孩子那里调用的任何函数都应该在子项中，并且您想要从开启者调用的任何函数都应该在开启者中。

JavaScript无法从表单中删除div

1 个答案:

修改

编辑2