javascript - 上下文菜单不会出现在 asp.net Iframe 中

Question

我有一个小问题，我在 Vanilla Javascript 中为我的 ASP.NET 应用程序开发了一个上下文菜单。当我使用它时，没有错误消息，但什么也没有显示。当我围绕我需要它工作的单词创建 Spans 时，上下文菜单应该在 Content Editable 上工作。这是用 span around 生成的词

<span id="0" class="underlineWord" oncontextmenu="rightClickMustWork(this);">test</span>

这是 Javascript 中的上下文菜单:

function rightClickMustWork(element) {
var x = document.getElementById('ctxMenu1');
if (x) x.parentNode.removeChild(x);
alert("1");
var d = document.createElement('div');
d.setAttribute('class', 'ctxMenu');
d.setAttribute('id', 'ctxMenu1');
element.parentNode.appendChild(d);
d.onmouseover = function (e) {
    this.style.cursor = 'pointer';
}
alert("2");
d.onclick = function (e) {
    if (document.getElementById("ctxMenu1") != null) {
        element.parentNode.removeChild(d);
    }
}
alert("3");
document.body.onclick = function (e) {
    if (document.getElementById("ctxMenu1") != null) {
        element.parentNode.removeChild(d);
    }
}
alert("4");
for (i = 0; i < 5; ++i) {
    var p = document.createElement('p');
    d.appendChild(p);
    p.setAttribute('class', 'ctxLine');
    p.setAttribute('onclick', 'alert("the action will be here if it worked")');
    p.innerHTML = "test";
}
alert("5");

和这个上下文菜单的CSS:

        .ctxMenu
    {
        position: absolute;
        min-width: 8em;
        height: auto;
        padding: 0px;
        margin: 0;
        margin-left: 0.5em;
        margin-top: 0.5em;
        border: 1px solid black;
        background: #F8F8F8;
        z-index: 11;
        overflow: visible;
    }
    .ctxLine
    {
        display: block;
        margin: 0px;
        padding: 2px 2px 2px 8px;
        border: 1px solid #F8F8F8;
        font-size: 1em;
        font-family: Arial, Helvetica, sans-serif;
        overflow: visible;
    }
    .ctxLine:hover
    {
        border: 1px solid #BBB;
        background-color: #F0F0F0;
        background-repeat: repeat-x;
    }

当我尝试时，我会检查所有带有数字的警报，但没有任何显示。我不知道我错过了什么。 (可编辑的内容位于 Iframe 内，但我认为这不会导致问题，因为所有警报都已播放)。

Answer 1

嗯..这可能有点令人沮丧。

问题出在一封信中:p.innerHTMl = "test"; 而不是 p.innerHTML = "test";

此外，我还添加了 event.preventDefault() 以避免浏览器上下文菜单。

function rightClickMustWork(element, event) {
  event.preventDefault();
   var x = document.getElementById('ctxMenu1');
   if (x) x.parentNode.removeChild(x);
   //alert("1");
   var d = document.createElement('div');
   d.setAttribute('class', 'ctxMenu');
   d.setAttribute('id', 'ctxMenu1');
   element.parentNode.appendChild(d);
   d.onmouseover = function (e) {
       this.style.cursor = 'pointer';
   }
   //alert("2");
   d.onclick = function (e) {
       if (document.getElementById("ctxMenu1") != null) {
           element.parentNode.removeChild(d);
       }
   }
   //alert("3");
   document.body.onclick = function (e) {
       if (document.getElementById("ctxMenu1") != null) {
           element.parentNode.removeChild(d);
       }
   }
   //alert("4");
   for (i = 0; i < 5; ++i) {
       var p = document.createElement('p');
       d.appendChild(p);
       p.setAttribute('class', 'ctxLine');
       p.setAttribute('onclick', 'alert("the action will be here if it worked")');
       // was p.innerHTMl = "test";
       p.innerHTML = "test";
   }
   //alert("5");
}

 .ctxMenu
    {
        position: absolute;
        min-width: 8em;
        height: auto;
        padding: 0px;
        margin: 0;
        margin-left: 0.5em;
        margin-top: 0.5em;
        border: 1px solid black;
        background: #F8F8F8;
        z-index: 11;
        overflow: visible;
    }
    .ctxLine
    {
        display: block;
        margin: 0px;
        padding: 2px 2px 2px 8px;
        border: 1px solid #F8F8F8;
        font-size: 1em;
        font-family: Arial, Helvetica, sans-serif;
        overflow: visible;
    }
    .ctxLine:hover
    {
        border: 1px solid #BBB;
        background-color: #F0F0F0;
        background-repeat: repeat-x;
    }

<span id="0" class="underlineWord" oncontextmenu="rightClickMustWork(this, event);">test</span>