使用Javascript动态创建触发弹出窗口的链接 [英] Using Javascript to dynamically create links that trigger popup windows
问题描述
我搜索过很多东西，但是找不到我想要做的解决方案.
I've searched high and low, and have not been able to find a solution for what I am trying to do.
我正在添加动态行，并使用诸如此类的代码按元素ID进行操作:
I am adding dynamic rows, and doing it by element id, using code such as this:
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);
我有一个字段要在其中添加文本链接，并使其打开一个新的尺寸窗口.基本上是一个弹出窗口.我尝试了许多不同的代码段，但都没有做到这一点.我最接近的是整页中的新标签页.
I have one field where I would like to add a text link, and have it open a new sized window. A popup, basically. I have tried many different code snippets I have found, and none of them have done that. The closest I have come is a new tab in a full page.
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);
我也尝试过类似的事情:
I have also tried things like:
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用于创建后续的动态行.
I can make it work in regular javascript with this code, but I use this in the first "row" of inputs, and the element id is being used to create the subsequent dynamic rows.
<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>
我希望有一个链接，或者有人可以提供一个示例来帮助我完成这项工作.
I hope there is either a link, or an example that someone can offer to help me make this work.
预先感谢您的帮助.
推荐答案
The proper way to achieve what you need would be the event delegation. That is, you assign the event handler to a parent element (like <body>), and check the event target inside.
例如，您可能具有以下HTML:
For example, you may have the following 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的情况下，它也可以作为备用.
Note that every link has a proper href attribute that will be used for popup windows. It will also serve as a fallback for the case when Javascript is disabled.
((简化-我不检查元素类型，也不存在href属性)脚本是:
And the (simplified — I don't check for element type, nor the existence of href property) script would be:
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和addEventListener在JavaScript中有问题吗?).另外，您也可以将jQuery用于相同的目的.
See the example here: http://jsfiddle.net/C53cd/3/. Works for me in FF16 and Chrome. Note that you might need to implement a simple polyfill for event binding to work in IE (MSIE and addEventListener Problem in Javascript?). Alternatively, you can use jQuery for the same purpose.
UPD::添加了IE的默认操作阻止功能.
UPD: Added default action prevention for IE.
UPD 2::添加了用于动态创建新链接的代码.
UPD 2: Added the code to create the new links dynamically.
这篇关于使用Javascript动态创建触发弹出窗口的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
