25

在我的测试中，给定 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 文档中创建一个按钮，然后用 angularjs ng-click 绑定。之后，一个文档 jquery “触发器”单击按钮。

4

4 回答 4

48

要在两个方向（父级到 iFrame，iFrame 到父级）访问和通信，如果它们都在同一个域中，可以访问角度范围，请尝试执行以下步骤：

*您不需要父级引用 angularJS 库...</p>

从父级调用子 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 调用父级

  1. 调用父函数：

parent.someChildsFunction();

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

于 2014-02-12T16:04:50.620 回答
14

您应该能够从 iFrame 获取父范围：

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

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

在 Angular 1.3.4 上测试

于 2014-12-02T17:27:22.497 回答
3

在我看来，与 iframe 进行通信的最佳方式是使用 window.top。如果您希望您的 iframe 获得您父母的范围，您可以window.scopeToShare = $scope;在您的控制器中进行设置，并且 iframe 页面可以在window.top.scopeToShare.

如果您希望您的父母获得 iframe 范围，您可以使用

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

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

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

于 2013-11-02T16:21:48.743 回答
0

这个很简单，对我有用：

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

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

在父页面控制器代码中：

window.updatedata = function (data) {
 $scope.$apply(function () {
     $scope.data = data
   }
 }
于 2018-10-19T09:51:38.657 回答