使用Javascript動態創建觸發彈出窗口的鏈接

我搜索了高和低，並且一直未能找到我正在嘗試做的解決方案。使用Javascript動態創建觸發彈出窗口的鏈接

我加入動態行，並通過元素ID這樣做，使用如下代碼：

var cellRight = row.insertCell(1); 
    var el = document.createElement('input'); 
    el.type = ''; 
    el.name = 'description' + iteration; 
    el.id = 'description' + iteration; 
    el.size = 55; 
    cellRight.appendChild(el);

我有一個領域，我想補充一個文本鏈接，並將其打開一個新的大小的窗戶。一個彈出，基本上。我已經嘗試了許多不同的代碼片段，而且他們都沒有做到這一點。我來的最接近的是整頁中的新標籤。

var cellRight = row.insertCell(3); 
    var el = document.createElement("td"); 
    var cell=document.createElement('td'); 
    var link=document.createElement('a'); 
    link.setAttribute('href','http://www.domain.com/page.php'); 
    link.setAttribute('target','_blank'); 
    link.setAttribute('height','400'); 
    link.setAttribute('width','500'); 
    link.appendChild(document.createTextNode('Page')); 
    cell.appendChild(link); 
    el.appendChild(cell); 
    cellRight.appendChild(el);

我也曾嘗試的東西，如：

link.onclick(window.open('http://www.domain.com/page.php','popUpWindow','height=400,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')

和

el.html('<a href="JavaScript:newPopup(\'http://www.domain.com/page.php\');">Page</a>');

我可以使其在常規的JavaScript運行這段代碼，但是我在第一個「行使用此「的輸入，並且元素ID正被用於創建後續的動態行。

<script type="text/javascript"> 
    function newPopup(url) { 
    popupWindow = window.open(
url,'popUpWindow','height=400,width=500,left=10,top=10,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes') 
} 
</script> 
<a href="JavaScript:newPopup('http://www.domain.com/page.php');">Page</a></td>

我希望有一個鏈接，或有人可以提供幫助我做這項工作的例子。

在此先感謝您的幫助。

來源

2012-11-20 Will Sam

實現你所需要的正確方法是event delegation。也就是說，您將事件處理程序分配給父元素（如<body>），並檢查裏面的事件目標。

例如，您可能有以下HTML：

<div id="container"> 
    <a href="http://www.domain.com/page.php">Page 1</a> 
    <a href="http://www.domain.com/page2.php">Page 2</a> 
</div> 

<button id="addBtn">Add a new link</button>

注意，每一個環節都有適當href屬性，該屬性將用於彈出窗口。它也將作爲Javascript被禁用的情況下的回退。

而且（簡化 - 我不檢查元素類型，也不是HREF屬性的存在）腳本是：

var container = document.getElementById('container'); 

container.addEventListener('click', function (e) { 
    if (e.preventDefault) { 
    e.preventDefault(); 
    } else { 
    e.returnValue = false; // For IE 
    } 

    var target = e.target; 
    var popupWindow = window.open(target.href,'popUpWindow', 
     'height=400, 
     width=500, 
     left=10, 
     top=10, 
     resizable=yes, 
     scrollbars=yes, 
     toolbar=yes, 
     menubar=no, 
     location=no, 
     directories=no, 
     status=yes' 
    ); 
}); 

// The following code creates links dynamically upon clicking the button 
document.getElementById('addBtn').addEventListener('click', function (e) { 
    var index = container.getElementsByTagName('a').length + 1; 
    var newLink = '<a href="http://www.domain.com/page' + index +'.php">Page ' + index +'</a>'; 

    container.innerHTML += newLink; 
});

在這裏看到的例子：http://jsfiddle.net/C53cd/3/。適用於FF16和Chrome。請注意，您可能需要實現一個簡單的polyfill，以便在IE中使用事件綁定（MSIE and addEventListener Problem in Javascript?）。另外，你可以使用jQuery來達到同樣的目的。

UPD：爲IE添加了默認動作防護。

UPD 2：添加了動態創建新鏈接的代碼。

來源

2012-11-20 05:08:46 unclenorton

我很欣賞這些信息，但我仍然無法獲得動態的「頁面」鏈接來創建彈出窗口。我不確定我可能會做錯什麼。 –

你能提供一個鏈接到演示頁面，或者設置一個jsfiddle嗎？問題可能來自其他地方。 – unclenorton

@WillSam請在這裏看到更新的小提琴：[http://jsfiddle.net/C53cd/3/](http://jsfiddle.net/C53cd/3/）。它允許根據需要添加鏈接。 – unclenorton

使用Javascript動態創建觸發彈出窗口的鏈接

回答

相關問題