将动态变量添加到onclick事件

Question

我有一个加载iframe的onclick事件。我需要能够动态更改onclick偶数事件中的部分URL。什么是最好的方法呢？我需要动态替换的部分我在下面突出显示为****变量***。

var ****variable here*** = '343h343432e';

<button type="button" id="load_2" class="btn btn-info" onClick="document.getElementById('attri_map').height = '520';document.getElementById('attri_map').src='https://example.com/****variable here***';document.getElementById('load_2').style.display = 'none';">Click to Load</button>

<iframe id='attri_map' width='100%'  height="0" frameborder='0' allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>

Answer 1

这是一个很好的机会，你可以提取JavaScript，因为内联并不是一个很好的实践。

删除HTML中元素的onClick事件，然后执行以下操作：

（我还将attri_map放入变量中，以消除为同一元素重新查询DOM的开销。）

var variable = "example";

document.getElementById("load_2").onclick = function () {
    var attrMap = document.getElementById('attri_map');
    attrMap.height = '520';
    attrMap.src='https://example.com/' + variable;
    document.getElementById('load_2').style.display = 'none';
};