Question

我正在尝试为Safari浏览器创建一个扩展程序，该扩展程序将添加一个带有多个链接的列表框和一个按钮的bar（.html）。当我点击按钮时，列表框中的所选项目（例如链接）将在新标签页中打开。

如果选择了项目 Microsoft ，并且用户单击了打开按钮，它将在新选项卡中打开 www.microsoft.com 。

我尝试使用下面的两个功能 selectedLink ，但似乎都无法正常工作。不过我可能做错了。

由于我使用的是Safari扩展程序，因此需要其他功能 openInTab ，以防有人怀疑我为什么不使用window.open。

<html>
<head>
  <title>Links</title>
  <select id="selectbox" name="" onchange="selectedLink(this);" ;>
    <option value="https://www.google.com" selected>Google</option>
    <option value="https://www.microsoft.com">Microsoft</option>
    <option value="https://www.apple.com">Apple</option>
  </select>
  <button onclick="openInTab(pSelect);">Open</button>
  <script type="text/javascript">
    function selectedLink(getLink) {
      var pSelect = getLink.value;
    }

    function selectedLink(getLink) {
      var selectIndex = getLink.selectedIndex;
      var selectValue = getLink.options[selectIndex].text;
      var pSelect = selectValue;
    }

    function openInTab(source) {
      var newTab = safari.self.browserWindow.openTab();
      newTab.url = source;
    }
  </script>
</head>
</html>

返回：

ReferenceError: Can't find variable: pSelect

Answer 1

您不需要在函数中传递它。只需使用select元素的 id 即可获取所选值。

尝试以下方式：

function openInTab() {
  var pSelect = document.getElementById('selectbox').value;
  console.log(pSelect)
  //var newTab = safari.self.browserWindow.openTab();
  //newTab.url = pSelect;
}

<html>
<head>
  <title>Links</title>
  <select id="selectbox" name="";>
    <option value="https://www.google.com" selected>Google</option>
    <option value="https://www.microsoft.com">Microsoft</option>
    <option value="https://www.apple.com">Apple</option>
  </select>
  <button onclick="openInTab();">Open</button>
  <script type="text/javascript">
    
  </script>
</head>
</html>

Answer 2

试试看。如果要使用

var newTab = safari.self.browserWindow.openTab();
newTab.url = source;

然后继续。我为解决您的 pSelect 错误并获取所需变量所做的事情。

function openInTab() {
      var source = document.getElementById('selectbox').value;
      console.log(source);
      var newTab = window.open(source, '_blank');
    }

<html>
<head>
  <title>Links</title>
  <select id="selectbox">
    <option value="https://www.google.com" selected>Google</option>
    <option value="https://www.microsoft.com">Microsoft</option>
    <option value="https://www.apple.com">Apple</option>
  </select>
  <button onclick="openInTab();">Open</button>
</head>
</html>

列表框所选项目按钮单击值中的打开链接

2 个答案: