帧源变化检测

Frame Source change detection

本文关键字：变化检测      更新时间：2023-09-26

我有以下代码:

<div class="row">
<div>
    <iframe id="myFrame" name="myFrame" class="btn-block" ng-src="{{myframeSrc | trusted}}" onLoad="contentChanged()" scrolling="no"></iframe>
</div>
<script type="text/javascript">
var contentChanged = function() {
    alert('frame content has changed');
};
</script>

我知道这应该是工作(它确实)，因为警报弹出。然而，我得到一个[Uncaught ReferenceError: contentChanged is not defined]错误。我做错了什么?注意:我正在通过Angular加载src，但需要纯javascript来检测当链接在Angular外部的iFrame中被点击时帧源的变化。

你的代码片段完全正确。唯一的错误是你声明的方式，这是由于JavaScript变量提升。

你的代码应该如下所示:

<script type="text/javascript">
function contentChanged() {
    alert('frame content has changed');
};
</script>
<div class="row">
<div>
    <iframe id="myFrame" name="myFrame" class="btn-block" src="http://www.w3schools.com" onLoad="contentChanged()" height="400"></iframe>
  
</div>

不同之处在于你的函数只在到达该行时定义，而上述函数在其周围的函数或脚本执行时定义，由于提升。

参考这个简单的例子- http://www.w3schools.com/js/js_hoisting.asp

尝试用函数声明代替调用匿名函数的var语句。参见var functionName = function() {} vs function functionName(){}，这些声明(在JavaScript中)有什么区别?

<script type="text/javascript">
function contentChanged() {
    alert('frame content has changed');
};
</script>
<div class="row">
<div>
    <iframe id="myFrame" name="myFrame" class="btn-block" ng-src="{{myframeSrc | trusted}}" onLoad="contentChanged()" scrolling="no"></iframe>
</div>

我的猜测是，由于<iframe>在<script>之前，它在<script>之前加载。

之后，<script>被加载，angular最终加载并更新<iframe>的src属性，这导致<iframe>重新加载并再次运行onLoad中的代码。

要证实这个理论，试着这样做:

<div class="row">
<div>
    <iframe id="myFrame" name="myFrame" class="btn-block" ng-src="{{myframeSrc | trusted}}" onLoad="console.log('iframe loaded'); contentChanged()" scrolling="no"></iframe>
</div>
<script type="text/javascript">
console.log('script tag is being executed');
var contentChanged = function() {
    console.log('contentChanged() is being executed');
    alert('frame content has changed');
};
</script>

你可能会在你的控制台中看到这样的输出顺序(你可能在angular或你的其他代码之间有其他行):

iframe加载

[Uncaught ReferenceError: contentChanged is not defined]

脚本标签正在执行

iframe加载

contentChanged()正在执行

window.frames -允许直接访问iframe窗口对象

frames.onload = function() {
    alert('frame content has changed')
 };
http://codepen.io/nagasai/pen/jrybgN

另一个选项是按文档。getElementsByTagName onloaddocument.getElementsByTagName (iframe的)[0]。Onload = function() {警告('框架内容已更改')

};

Codepen: http://codepen.io/nagasai/pen/gMgaJd

相关文章：