从 iframe 中访问父 Javascript 函数？答案

【问题标题】：Accessing parent Javascript function from within iframe?从 iframe 中访问父 Javascript 函数？
【发布时间】：2011-08-18 15:26:10
【问题描述】：

我正在尝试访问一个函数，该函数将从 iframe 页面内更新位于父级中的 JQuery UI 进度条。每次有人点击 iframe 页面中的链接时，我都希望它更新进度条。我四处寻找答案，使用“window.parent.FunctionName()”是给出的解决方案，但由于某种原因，它似乎不适用于我的情况？有什么想法吗？

更新：它似乎在 safari、firefox 中有效，但在 chrome 中无效？？？

我要在父页面访问的功能是：

var percentage = 0;                                                                 

$('ul li a').one('click', updateBar);                                               

function updateBar() {
    percentage += 8;                                                                
    $('.ui-progressbar-value').stop().animate({ width: percentage+"%" }, 500)       
    $('.middle').progressbar('option','value', percentage);                         

    if(percentage > 100) {                                                  
        $('ui-progressbar-value').stop().animate({ width: "100%"}, 500);            
    }
}

我从 iframe 页面调用的 JQuery 调用是：

$('#sidenav ul li a').one('click', window.parent.updateBar);

【问题讨论】：

iframe 是否与其父级在同一个域中？
是的，它们在同一个域中。它似乎在 Chrome 中不起作用？？
控制台是否出现错误？ Chrome + FF 在这种事情的工作方式上或多或少相同
@David Kemp，我从 Chrome JavaScript 控制台收到此错误：不安全的 JavaScript 尝试使用 URL 访问框架文件：//wslash/Users/W/Sites/webready/index.html#从带有 URL 文件的框架：//wslash/Users/W/Sites/webready/left/section1.html。域、协议和端口必须匹配。
@leetou - 您可以尝试从 Web 服务器运行它吗？从磁盘浏览文件时，浏览器的行为（有时是微妙的）不同。

标签： javascript jquery jquery-ui iframe

【解决方案1】：

试试

$('#sidenav ul li a').one('click',function(){

 window.parent.updateBar();

});

【讨论】：

这与 OP 已经尝试过的最终结果基本相同，但编写方式略有不同。

【解决方案2】：

确保 jQuery 也嵌入框架内
您的方法应该可行，但执行函数的上下文是父窗口。如果您想使用框架作为上下文来执行函数，请提供上下文作为参数：

 function updateBar(context) {
    percentage += 8;                                                                
    $('.ui-progressbar-value',context).stop().animate({ width: percentage+"%" }, 500)       
    $('.middle',context).progressbar('option','value', percentage);                         

    if(percentage > 100) {                                                  
        $('ui-progressbar-value',context).stop().animate({ width: "100%"}, 500);            
    }
}

$('#sidenav ul li a').one('click', function(){window.parent.updateBar(document);});

【讨论】：