Question

在我的测试中，给出了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＆＃34;触发＆＃34;点击按钮。

Answer 1

要在两个方向上访问和通信（iFrame的父级，父级的iFrame），如果它们都在同一个域中，并且可以访问角度范围，请尝试按照以下步骤操作：

*您不需要父级引用angularJS库...

从父级调用子级iFrame

1.从父（link to answer）获取子iFrame元素：

的document.getElementById（ “myIframe”）。contentWindow

2.访问元素的范围：

的document.getElementById（ “myIframe”）。contentWindow.angular.element（ “＃someDiv”）。范围（）

3.调用范围的功能或属性：

的document.getElementById（ “myIframe”）contentWindow.angular.element（ “＃someDiv”）范围（）someAngularFunction（数据）;

4.Call $ scope。$在运行函数逻辑/更新属性（link to Mishko’s answer）后应用：

$ scope。$ apply（function（）{}）;

另一个解决方案是在iFrame之间共享范围，但是你需要双方都有角度:( link to answer and example）

从子iFrame调用父级

调用父函数：

parent.someChildsFunction（）;

如果有必要，还会更新如何跨域进行操作..

Answer 2

您应该可以从iFrame获取父作用域：

var parentScope = $window.parent.angular.element($window.frameElement).scope();

然后你可以调用父方法或更改父变量（但记得调用parentScope.$apply来同步更改）

在Angular 1.3.4上测试

Answer 3

我认为与iframe通信的最佳方式是使用window.top。如果您希望iframe获得父级的范围，可以在控制器中设置window.scopeToShare = $scope;，然后window.top.scopeToShare的iframe页面就可以访问它。

如果您希望父级获取iframe范围，可以使用

window.receiveScope = function(scope) {
  scope.$on('event', function() {
    /* Treat the event */
  }
};

并在iframe控制器中调用window.top.giveRootScope($rootScope);

警告：如果您多次使用此控制器，请确保使用其他ID来识别您想要的范围。

Answer 4

这个非常简单，对我有用：

在iframe页面的控制器代码中：

$window.parent.window.updatedata($scope.data);

在父页面控制器代码中：

window.updatedata = function (data) {
 $scope.$apply(function () {
     $scope.data = data
   }
 }

Angularjs：在iframe中调用其他范围

4 个答案: