Question

我的计划目的：

点击“外部页面”超链接后，将执行javascript函数“randomLink”，该函数应动态提供指向IFrame fancybox的链接;这反过来应该加载这个提供的链接。

问题

目前我遇到的问题是：不是以上面概述的方式行事，一旦将一个链接分配给'data-src'属性，从运行时的这一点开始我就无法再次动态替换此属性的值。

如何直观地看到问题：

通过javascript警告消息表达的'd.getSeconds（）'值与馈送到Fancybox IFrame的'duckduckgo'网址的比较，使这个问题显而易见。

首次执行超链接“外部页面”时，“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

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

1 个答案: