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

Question

场景：

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

我想做的是从此图像获取 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 可能有一些相关性，但我不确定如何实施该解决方案。

Answer 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();
    });

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

Detecting an iframe reload, get img src, apply to parent

javascript

iframe

reload