createElement("a") - FireFox JavaScript

createElement("a") - FireFox JavaScript

本文关键字：quot FireFox JavaScript createElement      更新时间：2023-09-26

我有问题。我有一个iframe（可编辑），当我点击按钮时，我会创建一个链接。所以这不是问题所在。但是，在这之后，我停留在"链接"模式。我在FireFox中只有这个问题。怎么了。太多了。

index.php 中的JavaScript函数

    function insertLink(verlinkung,text) 
    {
        var doc = document.getElementById("frame").contentWindow.document;      
        var sel = doc.getSelection();
        if (sel.rangeCount > 0)
        {
            var range= sel.getRangeAt(0);
myParent=document.getElementById("frame").contentWindow.document.body;
            alink=document.createElement("a");
            text= document.createTextNode(text);
            alink.href = verlinkung;
            if (document.getElementById('check_underline').checked == false)
            {
                alink.setAttribute("style","text-decoration: none;");
            }
            else
            {
                alink.setAttribute("style","text-decoration: underline;");
            }
            alink.appendChild(text);
            myParent.appendChild(alink);
            range.insertNode(alink);
        }
    }

--在同一个站点中，类似javascript函数

<img src ='./images/toolbar/plus.png' onMouseDown = "insertLink(document.getElementById('link_href').value,document.getElementById('link_text').value);">

在Index.php 中

<iframe src = './editor.php' id = 'frame' class = 'iframe_design'>

editor.php中Iframe的内容：

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script language = 'JavaScript'>
        function lade()
        {
            document.body.contentEditable='true';
            document.designMode='on';
            void 0;
}
</head>  
<body style = 'font-family: verdana; font-size: small;'>
</body>
</html>

因此，当我用图像Click创建链接时，我会停留在"超链接"模式。只有在火狐。所以我可以写一个普通的文本，但它就像一个超链接。

您所做的应该是有效的。

试试这个简化版本：

<div id="x">A link should appear here: </div>
<script>
    var a = document.createElement("a");
    var text = document.createTextNode("I'm a link");
    a.setAttribute("style", "text-decoration: underline;");
    a.setAttribute("href", "https://github.com/adrianblynch?tab=repositories");
    a.appendChild(text);
    document.getElementById("x").appendChild(a);
</script>

适用于Chrome和Firefox。

到目前为止，我能找到的唯一解决方案是确保链接后有一些额外的内容，但仍在同一父级中，即<p>或body标记中。我通过在超链接后面直接添加一个不可见的字符&zwnj来实现这一点。这解决了你现在遇到的问题，但使用它，你必须设计一种干净、不干扰的方式来删除这些特殊字符。

您可以删除不再需要的实例，即被文本包围的zwnjs，或者：

  1. 在从CCD_ 4延迟之后
  2. 保存或导出内容时
  3. 当用户重新聚焦插入符号时

注意：如果放置太久，用户可能会发现他们的存在，或者至少注意到一种奇怪的行为。例如，如果您在新插入的链接后写入一些文本，但随后决定删除该文本和链接，则在按住delete键时会注意到一个字符的停顿。因此，一旦不再需要它们，最好尽快将其移除。

下面是一个工作演示。我的代码没有使用iframe，但您可以很容易地将其修改为以这种方式操作。

function insertLink(verlinkung, text) {
  var doc = document, sel = doc.getSelection();
  if ( sel.rangeCount > 0 ) {
    var range = sel.getRangeAt(0), 
        myParent = document.getElementById('editable'),
        docFragment = range.createContextualFragment('<a href="' + verlinkung + '">' + text + '</a>&zwnj;');
    range.insertNode(docFragment);
  }
}
html, body { height: 100%; }
.editable {
  width: 500px;
  height: 400px;
  border: 1px dotted gray;
  padding: 10px;
}
button {
  background: orange;
  border-radius: 10px;
  border: 0;
  padding: 8px;
  margin-top: 8px;
}
p {
  padding: 0;
  margin: 0;
  margin-bottom: 8px;
}
<div id="editable" class="editable" ContentEditable="true">
<p>
Focus your caret at the end of this text and click "Add Link", then place the caret after the new link and type some text. The text should not be part of the link.
</p>
<p>
The only way I could stop Firefox from placing the caret inside the link's range, and so not inserting new content inside it, was to make sure there was some content after it.
</p>
<p>
Using <strong>&amp;zwnj;</strong> &mdash; <em>zero width non-joiner</em> &mdash; means that you can have an invisible character, that isn't treated as whitespace (and so isn't automatically removed). The downside to this method is that you'll need to find a point where you can safely remove these special characters. You could wait until you are saving/exporting your editor content &mdash; but if you wait until then it is possible the user will notice their existence when deleting characters.
</p>
</div>
<button onclick="insertLink('#test', 'Test')">Add Link</button>

相关文章：