javascript - 上下文菜单未出现在asp.net iframe中

我有一个小问题，我在我的ASP.NET应用程序的Vanilla Javascript中使用上下文菜单。
当我使用它时，没有错误消息，但没有任何显示。当我围绕需要它工作的单词创建Span时，上下文菜单应该可以在Content Editable上工作。这是跨度很高的单词

<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中，但是我认为这不会引起问题，因为播放了所有警报）。

最佳答案

好吧..这可能有点令人沮丧。

问题出在一个字母：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>

关于javascript - 上下文菜单未出现在asp.net iframe中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33894321/