尝试动态更改 IFrame Fancybox data-src 属性

Question

我的程序的目的：

单击 'External page' hyperlink 后，将执行 javascript 函数 'randomLink'，它应该动态地向 IFrame 提供 link花式盒子；反过来应该加载这个提供的 link.

问题

目前我遇到的问题是：不是按照上面总结的方式行事，一旦一个 link 被分配给 'data-src' 属性，从这一点在运行-时间我无法再次动态替换此属性的值。

如何直观地查看问题：

比较通过 javascript 警报消息表示的 'd.getSeconds()' 值与馈送到 Fancybox IFrame 的 'duckduckgo' URL 值，可以看出这个问题。

当第一次执行 hyperlink 'External Page' 时，'duckduckgo' URL 匹配 JS 警报中显示的当前 'd.getSeconds()' 值，但在这一点之后，当再次选择 hyperlink 时，这些值将不再匹配。而对于 URL，第一个 'd.getSeconds()' 值将在 Fancybox IFrame 中执行，与预期的新 'd.getSeconds()' 值相反。

如果能帮助解决此问题，我们将不胜感激。

谢谢。

CodePen Link 问题：

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 属性冲突。

我会用一种不同的方法来处理 "problem"，即仅使用 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

尝试动态更改 IFrame Fancybox data-src 属性

Attempting to dynamically change IFrame Fancybox data-src attribute

html

javascript

jquery

fancybox

fancybox-3