<a href='#'>Execute JavaScript</a>

<script>
var link = 'http://facebook.com/';
   
$(function (){
   $('a').click(function (){
      window.open(link, "_blank", "width=500, height=500")
   })
})
</script>

單一寫法

只是取得 a 元素的 href 屬性值，下方寫法就可以了：

<a href="https://tw.yahoo.com/"
    onclick="window.open(this.href, this.textContent, 'width=500, height=500')">Yahoo</a>

然而，點擊連結會同時觸發 a 元素和 onclick 事件，就是瀏覽器會開啟一個索引標籤和一個彈出視窗。如果只是想要彈出視窗的話，就要換成下方寫法：

<a href="javascript:void(0)"
    data-href="https://tw.yahoo.com/"
    onclick="window.open(this.dataset.href, this.textContent, 'width=500, height=500')">Yahoo</a>

複合寫法

多個 a 元素的情況下，不建議綁定多個 onclick 事件，不僅浪費資源，網頁也會變得不易維護。

下方寫法只有綁定一個 onclick 事件，如果需要新增或刪除連結，只要調整 HTML 即可。

<ul id="list">
    <li><a href="https://www.bing.com/">Bing</a></li>
    <li><a href="https://www.google.com/">Google</a></li>
    <li><a href="https://tw.yahoo.com/">Yahoo</a></li>
</ul>

document.getElementById('list')
        .addEventListener('click', e =>
            window.open(e.target.href, e.target.textContent, 'width=500, height=500')
        );