在我的测试中,给定2个文档A和B。在A文档中,有一个iframe,iframe源是B文档。我的问题是如何修改B文件的某些变量范围?
这是我的代码:一个文档
<html lang="en" ng-app=""> <head> <meta charset="utf-8"> <title>Google Phone Gallery</title> <script type='text/javascript' src="js/jquery-1.10.2.js"></script> <script type='text/javascript' src="js/angular1.0.2.min.js"></script> <script> var g ; function test($scope,$http,$compile) { $scope.tryget = function(){ var iframeContentWindow = $("#iframe")[0].contentWindow; var iframeDOM = $("#iframe")[0].contentWindow.document; var target = $(iframeDOM).find("#test2"); var iframeAngular = iframeContentWindow.angular; var iframeScope = iframeAngular.element("#test2").scope(); iframeScope.parentcall(); iframeContentWindow.angular.element("#test2").scope().tempvalue = 66 ; iframeScope.tempvalue = 66; iframeContentWindow.tt = 22; iframeScope.parentcall(); console.log(iframeScope.tempvalue); console.log(angular.element("#cont").scope()); } } </script> </head> <body> <div ng-controller="test"> <div id="cont" > <button ng-click="tryget()">try</button> </div> </div> <iframe src="test2.html" id="iframe"></iframe> </body> </html>
我的B文件:
<!doctype html> <html lang="en" ng-app=""> <head> <meta charset="utf-8"> <title>Google Phone Gallery</title> <script type='text/javascript' src="js/jquery-1.10.2.js"></script> <script type='text/javascript' src="js/angular1.0.2.min.js"></script> <script> var tt =11; function test2($scope,$http,$compile) { console.log("test2 controller initialize"); $scope.tempvalue=0; $scope.parentcall = function() { $scope.tempvalue = 99 ; console.log($scope.tempvalue); console.log(tt); } } </script> </head> <body> <div ng-controller="test2" id="test2"> <div id="cont" > <button ng-click="parentcall()">get script</button> </div> {{tempvalue}} </div> </body> </html>
注意:实际上,有一些方法可以做到,我觉得这就像是一种破解,而不是完成它的正确方法:即在b Document中创建一个按钮,然后与angularjs ng- click绑定。之后,一个文档jquery“触发”单击按钮。
要访问两个方向(iFrame的父级,iFrame的父级)并在两个方向上进行通信(如果它们都在同一个域中,并且可以访问角度范围),请尝试执行以下步骤:
*您不需要父母来引用angularJS库…
从父级调用子级iFrame
1.从父级获取子级iFrame元素链接到答案:
document.getElementById(“ myIframe”)。contentWindow
2.访问元素的范围:
document.getElementById(“ myIframe”)。contentWindow.angular.element(“#someDiv”)。scope()
3.调用范围的函数或属性:
document.getElementById(“ myIframe”)。contentWindow.angular.element(“#someDiv”)。scope()。someAngularFunction(data);
4.在运行函数逻辑/更新属性后调用$ scope。$apply链接到Mishko的答案:
$ scope。$ apply(function(){});
从子级iFrame调用父级
parent.someChildsFunction();
如有必要,还将更新跨域操作方法。