个人中心
gpt4 book ai didi

javascript - Angularjs:调用 iframe 中的其他范围

转载 作者：行者123 更新时间：2023-12-02 22:47:24 29 4
gpt4 key购买 nike

在我的测试中，给定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绑定(bind)。之后，文档jquery“触发”单击按钮。

最佳答案

要在两个方向(父级到 iFrame，iFrame 到父级)进行访问和通信，如果它们都位于同一域中，并且可以访问 Angular 范围，请尝试执行以下步骤:

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

从父级调用子 iFrame

1.从父 iFrame 元素获取子 iFrame 元素 ( link to answer ):

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 ( link to Mishko’s answer ):

$scope.$apply(function () { });

从子 iFrame 调用父级

  1. 调用父函数:

parent.someChildsFunction();

如有必要，还将更新如何跨域。

关于javascript - Angularjs:调用 iframe 中的其他范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18437594/

29 4 0
文章推荐： powershell - 使用 ARM 输出或 powershell 获取 Azure Function 默认 key 的方法
文章推荐： angularjs - 如何将主体有效负载传递给 Angular $resource DELETE 调用
文章推荐： cassandra - 为什么创建表需要这么长时间？
文章推荐： angularjs - 在 AngularJS 端到端测试中使用 opportunity.js
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com