附加的 <a> 链接在 Chrome 中不起作用，但通过 Notepad++ 起作用？答案

【问题标题】：Appended <a> links not working in Chrome but works through Notepad++?附加的 <a> 链接在 Chrome 中不起作用，但通过 Notepad++ 起作用？
【发布时间】：2017-05-24 11:30:01
【问题描述】：

所以在 popup.html 中，当我将它加载到 Chrome 中时，我得到了一些可以工作的链接，但是当我使用 forminput.js 附加一些链接时；附加了链接，当我从 Notepad++ 启动它时它确实可以工作，但是当我将它加载到 Chrome 时无法工作，dropdown.js 和 createtab.js 都可以正常工作并且与这个问题无关，它们包含用于打开标签的逻辑和处理下拉菜单。谢谢

popup.html

<body>
<form id="aform">
  URL:<br>
  <input type="text" name="URL" id="URL">
  <br>
  Bookmark Name:<br>
  <input type="text" name="bookmarkname" id="bookmarkname">
  <br><br>
  <input type="button" id="formsubmit" value="Submit">
</form> 
<div class="dropdown">
  <button class="dropbtn" id="dropdown">Links</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="https://www.youtube.com">Youtube</a>
    <a href="https://www.amazon.com">Amazon</a>
    <a href="https://www.yahoo.com">Yahoo</a>
  </div>
</div>

<script src="forminput.js"></script>
<script src="dropdown.js"></script>
<script src="createtab.js"></script>

manifest.json

    {
    "name" : "Links",
    "version" : "1.0",
    "description" : "links 4 u",

    "manifest_version" : 2, 

    "browser_action": {
        "default icon":"icon.png",
        "default_popup":"popup.html"
    },

    "permissions": [
        "tabs",
        "storage"
    ]
}

forminput.js

    function retrieveFormData() {

            var URL = document.getElementById("URL").value;
            var Bookmarkname = document.getElementById("bookmarkname").value;
            var y = document.getElementById("myDropdown");
            var aTag = document.createElement('a');
            aTag.appendChild(document.createTextNode(Bookmarkname));
            aTag.href = URL;
            y.appendChild(aTag);
}


document.getElementById("formsubmit").addEventListener("click",retrieveFormData);

【问题讨论】：

说了这么多......你的代码工作得很好jsfiddle.net/4jffmwwz......虽然，没有dropdown所以也许dropdown.js和createtab.js之一没有“看到”通过“提交”按钮对 DOM 进行的更改 - 没有看到该代码，并且添加链接可以按您的意愿工作，唯一的结论是您没有显示的两个文件之一不起作用
但是一切都可以通过记事本进行，Chrome 中是什么导致链接不起作用？抱歉，我不理解逻辑，它正在正确附加，所以我不明白为什么表单不起作用
but everything works through notepad - 这是什么意思？记事本不是浏览器...您正在对网页中的 DOM 进行动态更改...这与编辑网页源并重新加载它不同
你看小提琴链接了吗？ jsfiddle.net/4jffmwwz ...看看它是如何在您想要它们的位置添加<a>标签...这表明您发布的代码可以按预期工作 - 这是您没有显示的代码不起作用跨度>
当您加载并执行您的扩展程序时，various appropriate consoles for your extension 中显示的究竟是什么？

标签： javascript html google-chrome google-chrome-extension hyperlink

【解决方案1】：

弹出窗口是一个单独的文档（请参阅extensions architecture），无法在扩展的内部 URL 之外导航，即 chrome-extension://blablablabla/

您需要为所有链接添加target="_blank" 属性，或者如果您想在当前选项卡中打开链接，请使用tabs API（需要"tabs" 权限，或者更好的是"activeTab"）：

chrome.tabs.update({url: 'https://www.google.com'});

【讨论】：

你太棒了，添加目标属性唤醒，谢谢！