Question

我不知道为什么我的JavaScript代码没有在对话框窗口中执行。我使用以下代码来监视何时加载了我想要应用代码的DOM元素：

let ready = function () {

  // If the body element and the element exist
  if (document.querySelector('#TxtEmailBody')) {

    let id = document.querySelector('#TxtEmailBody');
    let pasteText = document.createTextNode("Test");
    id.appendChild(pasteText);

    // Return so that we don't call requestAnimationFrame() again
    return;
  }

  // If the body element isn't found, run ready() again at the next pain
  window.requestAnimationFrame(ready);
};

// Initialize our ready() function
window.requestAnimationFrame(ready);

据我了解，此代码应监视DOM，直到加载#TxtEmailBody并更改该元素中的文本。但是，它没有执行。

我想这是因为当实际代码执行时，没有加载对话框窗口的DOM元素。但这就是ready()函数应该监视的内容。

使用Chrome开发工具控制台我无法通过ID或querySelector获取元素，除非我先加载对话框窗口，然后（ Ctrl + Shift + C ）选择了一个元素来关注此对话框中的开发人员工具窗口。

我检查过，对话框不是iframe，这可以解释为什么代码没有在对话框窗口中执行。

编辑：这里是要处理的元素所在的标记：

<div class="ms-core-form-line">
<textarea name="TxtEmailBody" rows="6" cols="40" id="TxtEmailBody" onkeyup="OnEmailBodyKeyUp(this)"
    alwaysenablesilent="true" onpaste="MultiLineTextBoxOnPaste(this, 2000)" class="ms-helperText ms-fullWidth ms-aclinv-message-input"
    onblur="OnEmailBodyBlur(this)" oninput="OnEmailBodyInput(this)" onfocus="OnEmailBodyFocus(this)" onkeypress="MultiLineTextBoxOnKeyPress(this, 2000)"
    title="E-mail body text field"></textarea>
<div id="emailBodyCounter" class="ms-aclinv-emailBodyCounter"></div>

Answer 1

据我了解，如果id为#TxtEmailBody的元素是输入，则它不会获得节点pasteText的值。

输入的结构是

<input type="text" id="TxtEmailBody" value="My Input" />

申请id.appendChild(pasteText)后它会变成

  <input type="text" id="TxtEmailBody" value="My Input">Test</input>

，值仍为"My Input"

如果是这种情况，则可以设置值

id.value = pasteText.nodeValue;

Answer 2

更改

<textarea ... id="#TxtEmailBody" ... >

到

<textarea ... id="TxtEmailBody" ... >

换句话说：从id删除哈希（因为document.querySelector('#TxtEmailBody')尝试在html中查找具有id="TxtEmailBody"的元素（哈希是查询选择器中id的符号））！另请记住， id属性对于整个html文档必须是唯一的。

JavaScript代码未在对话框窗口中执行

2 个答案: