AngularJS iframe 包装 iframe，子 iframe 无法打开相同的域 URL答案

【问题标题】：AngularJS Iframe wraps iframe, the child iframe could not open same domain URLAngularJS iframe 包装 iframe，子 iframe 无法打开相同的域 URL
【发布时间】：2015-07-09 15:48:29
【问题描述】：

我正在编写一个指令，该指令允许在每次更改元素内部的内容时缩放内部 iframe。我的问题不是关于修改 iframe 或同源策略问题中的某些内容。在特定情况下未加载第二个 iframe。请仔细阅读我下面的描述

<div my-directive>
<a class="box" href="javascript:void(0)">
<iframe fake-src="{{URL1}}" /> <!-- this iframe on fly -->
</a>
</div>

代码是：

app.directive('myDirective', function ($timeout, $sce, $timeout, ssHelper, ratchetService) {

return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            scope.url = '';


            var url, boxElem;
            var loadOnce = false;
            scope.$watch(function(){  return element.html();  },
                function(elementBody, oldElementBody){
                    //console.log('trigger frame-matrix change', $(element) )
                    if(elementBody.trim() != ''){
                        //get the content under of the frame-matrix tag
                        boxElem = $(element).find('.box').eq(0);


                            var fakeIframe = $(element).find('iframe[fake-src]');

                            if(fakeIframe.length > 0){
                                var boxWidth = $(element).data('box-w');
                                var boxHeight = $(element).data('box-h');

                                var _url;
                                //if(scope.url != fakeIframe.attr('fake-src')){
                                    loadOnce = false; //prevent webkit load twice

                                    scope.url = fakeIframe.attr('fake-src')
                                    fakeIframe.removeAttr('fake-src')
                                    _url = $sce.trustAsResourceUrl(scope.url);

                                    fakeIframe.attr('src', _url)
                                    //fakeIframe.on('load', function () {
                                    fakeIframe.load(function () {
//something wrong happened and the code does not work in the case iframe of iframe

                                        if(!loadOnce){
                                            loadOnce = true;
                                            beautify(fakeIframe, boxWidth, boxHeight); // To make this short, I skip the beautify function code in this example
                                        }

                                    })
                                //}

                        }


                    }
            });


        }
    };
});

我有 page A 包含 a iframe 打开 URL1 这是使用上述指令，它工作正常。我制作了page B，其中包含iframe(first/parent iframe) 对上面page A 的引用，有两种情况发生：

如果URL1（page A 的 iframe）是EXTERNAL URL（与我的网站不同）域），它会正常工作
如果URL1（page A 的 iframe）是INTERNAL URL（与我的网站域相同），它将不起作用。 iframe 的onload 事件永远不会在这种情况下触发。再次，这发生在同一个域 URL 上。

【问题讨论】：

标签： javascript angularjs iframe

【解决方案1】：

我的网址中的井号标签有问题。无法重新加载子 iframe，因为它检测到除了哈希标记后的后缀之外的 URL 完全不变。如果我必须从URL1 中删除它，它会起作用

之前：

mydomain.net/page/#/pageA
mydomain.net/page/#/pageB

之后

mydomain.net/page/pageA
mydomain.net/page/pageB

【讨论】：