gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 22:47:24 28 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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com