Question

我在下面的代码中提取了来自Visa网站的外汇数据。每次点击日期，它都会添加另一行。

但添加一行似乎会导致重新加载/刷新所有iframe ...为什么？我该如何预防？

看到它

<body>
<script>

var date = new Date();

function format(date) {
    var mm = date.getUTCMonth() + 1;
    var dd = date.getUTCDate();
    var yy = date.getUTCFullYear();
    return mm + '/' + dd + '/' + yy;
}

function addrow(){
    var d = format(date);
    document.body.innerHTML +='<div class="row"><div class="date" onclick="addrow()">'+d+'</div><div class="rate"><iframe scrolling="no" src="http://usa.visa.com/support/consumer/travel-support/exchange-rate-calculator.html/?fromCurr=USD&toCurr=EUR&fee=0&exchangedate=' + d + '"></iframe></div></div>';
    date.setDate(date.getDate() - 1);
}

addrow();

</script>
</body>

Answer 1

向对象添加文本innerHTML会导致对象的完全刷新 - 在本例中为document.body。因此，其中的所有iframe都将重新加载。

相反，您可以创建一个新的DIV元素，并将其附加为document.body的子元素：

function addrow(){
  var d = format(date);
  var newRow= document.createElement('div');
  newRow.innerHTML= '<div class="row"><div class="date" onclick="addrow()">'+d+'</div><div class="rate"><iframe scrolling="no" src="http://usa.visa.com/support/consumer/travel-support/exchange-rate-calculator.html/?fromCurr=USD&toCurr=EUR&fee=0&exchangedate=' + d + '"></iframe></div></div>';
  document.body.appendChild(newRow);
  date.setDate(date.getDate() - 1);
}

想要使用js在onclick上添加行

1 个答案: