检测 iframe 重新加载，获取 img src，应用于父级答案

【问题标题】：Detecting an iframe reload, get img src, apply to parent检测 iframe 重新加载，获取 img src，应用于父级
【发布时间】：2015-07-02 11:55:06
【问题描述】：

场景：

“父页面”包含两个 iframe，“activity_overview”和“upload_avatar”。 “Activity_Overview”包含同一域上的页面。 “Upload_avatar”还包含同一域上的一个页面，其中包含一个表单。当'upload_avatar'中的表单（提交新头像img）被提交时，它会自动在'activity_overview'窗口中打开一个包含上传图像的新页面。

我想做的是从此图像中获取 img src 并将其传递给我的父页面中的几个 div，以便这些图像在重新加载“activity_overview”时（或不久之后）刷新iframe。

我尝试了很多方法，包括将 src 作为变量传递，从 php 到 js，setInterval 以继续检查 img var 是否已定义..等等。以下代码对我来说似乎最简单和理想，但未检测到 iframe 中的页面重新加载。

$(document).ready(function(){
  function avatarUpdate(){
    $('#avatar-crop-submit').click(function () {
        $('#avatar-upload-form').submit(function() {
            $('#avatar-upload-form').attr('target','activity_overview');
            window.parent.$("#overview-list, #overview").addClass('active');
            window.parent.$("#edit-list, #edit").removeClass('active');
            window.parent.$('#upload_avatar').attr('src', 'www.example.com/form/');
            $('#activity_overview').on('load', function(){
                var avatar_src = $('#temp_header_avatar img').attr('src');
                window.parent.$('#header_avatar').html('<img src="' + avatar_src + '" class="avatar user-1-avatar avatar-150 photo" width="150" height="150" alt="Profile Photo">').hide().fadeIn(1000);
                window.parent.$('#nav_avatar').html('<img src="' + avatar_src + '" class="avatar img-circle user-1-avatar avatar-60 photo" width="60" height="60" alt="Profile Photo">').hide().fadeIn(1000);
            });
        });
    });
  }       
  avatarUpdate();
});

我认为this question 可能有一些相关性，但我不确定如何实施该解决方案。

【问题讨论】：

$('activity_overview') 选择器将查找标签。修复选择器，看看是否有效
如果 iframe 重新加载，需要您的代码在新加载的页面中运行。在提交处理程序中运行代码没有好处。此外，在其他处理程序中嵌套事件处理程序也会导致问题......不是一个好习惯
谢谢@gp，我最初有这个，尝试了一些新的东西，重新输入并忘记了hte'#'。不幸的是，它仍然不能解决问题。
@charlietfl，嵌套的 .submit() 位于 .click() 处理程序中，因为它是一个两步表单。如果我不使用那个 .click() 处理程序，表单会过早地在 iframe 中打开。这个问题有更好的解决方案吗？
这个 javascript 在哪里运行？ #activity_overview 和 #avatar-upload-form 假定在同一帧中。但是，从您的问题来看，似乎 activity_verview 是一个可以从顶部窗口访问的框架，而 avatar-upload-form 位于 upload_avatar 框架内。

标签： javascript iframe reload

【解决方案1】：

感谢@gp 以及他对需要从哪里调用 js 的澄清，我得到了它的工作。

我将以下代码放在正在加载到 iframe 的页面中，它可以按需要工作。

    $(window).load(function() {
      function getAvatarSrc(){
        var avatar_src = $('#temp_header_avatar img').attr('src');
        window.parent.$('#header_avatar').html('<img src="' + avatar_src + '" class="avatar user-1-avatar avatar-150 photo" width="150" height="150" alt="Profile Photo">').hide().fadeIn(1000);
        window.parent.$('#nav_avatar').html('<img src="' + avatar_src + '" class="avatar img-circle user-1-avatar avatar-60 photo" width="60" height="60" alt="Profile Photo">').hide().fadeIn(1000);
      };  
      getAvatarSrc();
    });

【讨论】：