試圖動態更改IFrame Fancybox data-src屬性

Question

我的計划的目的：

單擊“外部頁面”超鏈接后，將執行javascript函數“randomLink”，該函數應動態提供指向IFrame fancybox的鏈接; 反過來應該加載這個提供的鏈接。

問題

目前我遇到的問題是：不是以上面總結的方式行事，一旦將一個鏈接分配給'data-src'屬性，從運行時的這一點開始我就無法替換該值此屬性再次動態。

如何直觀地看到問題：

通過javascript警告消息表達的'd.getSeconds（）'值與饋送到Fancybox IFrame的'duckduckgo'URL的比較，使這個問題顯而易見。

當第一次執行超鏈接“外部頁面”時，“duckduckgo”URL與JS警報中顯示的當前“d.getSeconds（）”值匹配，但在此之后再次選擇超鏈接時，這些值將不再顯示比賽。 而不是URL，第一個'd.getSeconds（）'值將在Fancybox IFrame中執行，而不是預期的新'd.getSeconds（）'值。

任何幫助解決這個問題的人都會非常感激。

謝謝。

CodePen鏈接問題：

http://codepen.io/anon/pen/yMNxrK

HTML：

<p>

  <a data-fancybox data-src="" href="javascript:;" onclick="randomLink(this)">
    External page
  </a>

</p>

使用Javascript：

function randomLink(a) {

var d = new Date();
alert(d.getSeconds())

a.setAttribute('data-src', 'https://duckduckgo.com/?q=' + d.getSeconds());
}

Answer 1

我看到的問題是data-fancybox屬性將<a>元素綁定到fancybox，因此與onclick屬性沖突。

我會用不同的方法解決“問題”，只使用onclick屬性調用randomLink函數，然后在隨機創建目標源之后以編程方式觸發fancybox，

HTML：

<a href="javascript:;" onclick="randomLink()">External page</a>

JavaScript：

function randomLink() {
  var d = new Date();
  alert(d.getSeconds())
  var href = 'https://duckduckgo.com/?q=' + d.getSeconds()
  $.fancybox.open({
    src: href,
    type: 'iframe',
    opts: {}
  })
}

分叉筆： http ： //codepen.io/anon/pen/dvYbrN