AngularJS：在iframe中调用其他范围

小编典典

AngularJS：在iframe中调用其他范围

angularjs

在我的测试中，给定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“触发”单击按钮。

阅读 287

2020-07-04

共1个答案

小编典典

要访问两个方向（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之间共享作用域，但随后您需要在两面都成角度

从子级iFrame调用父级

调用父函数：

parent.someChildsFunction（）;

如有必要，还将更新跨域操作方法。

2020-07-04