Question

我有以下代码：

<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来检测在iFrame内部在Angular外部点击链接时帧源的变化。

Answer 1

您的代码段完全正确。唯一的错误就是您声明的方式以及由于JavaScript Variable提升而导致的错误。

您的代码应如下所示。

＆＃13;

<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>

＆＃13;

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

请参阅此简单示例 - http://www.w3schools.com/js/js_hoisting.asp

Answer 2

尝试将函数声明替换为调用匿名函数的var语句。请参阅var functionName = function() {} vs function functionName() {}，What's the difference in those declarations (in 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>

Answer 3

我的猜测是，由于<iframe>位于<script>之前，因此会在<script>之前加载。

稍后，<script>已加载，angular最终会加载并更新<iframe>的{{1}}属性，这会导致src重新加载并运行代码再次发送<iframe>。

要确认这一理论，请尝试以下方法：

onLoad

您可能应该在控制台中看到此顺序的输出（您可能在angular或其他代码之间有其他行）：

iframe已加载

[未捕获的ReferenceError：未定义contentChanged]

正在执行脚本标记

iframe已加载

正在执行contentChanged（）

Answer 4

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

frames.onload = function() {
    alert('frame content has changed')
 };

http://codepen.io/nagasai/pen/jrybgN

另一个选项是document.getElementsByTagName onload document.getElementsByTagName（'iframe'）[0] .onload = function（）{ 警报（'框架内容已更改'） };

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

帧源更改检测

4 个答案: