angularjs - 如何在 iframe 元素更改时读取 src 属性答案

【问题标题】：angularjs - how to read the src attribute of an iframe element as it changesangularjs - 如何在 iframe 元素更改时读取 src 属性
【发布时间】：2015-04-02 02:05:58
【问题描述】：

我试图了解当用户从包含 iframe 的父页面导航 iframe 时如何读取 iframe 的 src 属性。这可能吗？

所以，假设我将 iframe src 属性初始设置为

“http://www.example.com”

然后用户导航到

“http://www.example.com/anotherpage.html”

我如何知道何时进行了更改以及更改了哪些新 src？

任何帮助表示赞赏，

谢谢

【问题讨论】：

标签： javascript jquery html angularjs iframe

【解决方案1】：

您可以使用 onLoad 事件，因此在您的情况下提供一个处理程序：

 <iframe src="http://www.example.com" onLoad="iFrameSourceChanged(this);"></iframe>

var originalUrl = "http://www.example.com";
function iFrameSourceChanged(iframe)
{
     if(iframe.src != originalUrl)
      {
         // it changed to a different source
      }
}

iFrameSourceChanged 函数将在 iframe 的源发生更改时调用

【讨论】：

【解决方案2】：

您可以使用自定义指令来实现。

  <iframe ng-src="{{iframelink}}" iframeurlload></iframe>

自定义指令

app.directive('iframeurlload', function($state) {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element.bind('load', function() {
                    var url =angular.element(document.querySelector('iframe')).contents()[0].URL;
                    if (url.includes("anotherpage")){
                        // Do anything what you want
                    }
                });

            }
        };

【讨论】：