javascript - 尝试动态更改 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属性绑定(bind) <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: {}
  })
}

fork 笔: http://codepen.io/anon/pen/dvYbrN