Question

我有一个解析Tumblr博客模板的简单应用程序。它是在自定义屏幕之后建模的，包含带有一些可配置选项和iframe的标题。每次选项更改时，应用都会重新加载iframe，序列化配置表单并使用序列化数据作为查询字符串更新iframe的src。

这一切都很好，除非每次发生这种情况，我只能使用更改的选项重新加载主索引页面。如果用户想要通过导航离开索引来查看单个帖子页面，则模板仅使用默认选项呈现该页面。换句话说，当用户导航博客时，更改的选项不会保留。

我已经能够对$('iframe').load()事件进行“持续更改”，如下所示：

$('iframe').load(function(){
  updateTheme();
});

唯一的问题是，正如您所知，这将等待iframe使用默认选项完全呈现页面，然后使用更新的选项重新呈现它。我的意思是......它有效，但它并不是一个很好的解决方案。

是否有人知道如何阻止iframe加载，捕获用户所需的位置，然后使用标题中显示的当前选项重新渲染帧？

非常感谢任何帮助。提前谢谢！

Answer 1

您是否同时托管顶级页面和嵌入式iframe页面？如果是这样，你可以玩一些游戏，但它并不漂亮。例如，您可以重写嵌入式iframe中的链接，以便预先填充配置选项，例如有类似的东西：

$('iframe').load(function(){
  $('a', $('iframe')).each(function() {
    var new_url = this.attr("href");
    new_url += config_options;
    this.attr("href", new_url);
  });
});

Answer 2

以下是我提出的建议：

var p = top || parent;

(function($){
  $('a').click(function(e) { 
    var prevent = e.isDefaultPrevented(),
        is_local = p.isLocal(this.href),
        is_hash = $(this).attr('href').match(/^#/);

    if(prevent || ! is_local || is_hash) return;
    e.prevenDefault();
    p.updateTheme(this.href);
    return false;
  });
})(jQuery);

我担心的是，我会影响用户附加到<a/>标签的javascript事件，但显然jQuery会检测默认的阻止事件，即使它们没有被jQuery本身阻止。我测试了这样：

document.getElementById('test-link').onclick = function() {
    return false;
}

jQuery检测到原始事件已被阻止，所以我只是假设我不应该继续。

防止iFrame更改位置？

2 个答案: