1. Zuhause
  2. Frage und Antwort
  3. Rahmen Quelle Änderungserkennung

Rahmen Quelle Änderungserkennung

2016-06-24 15 views
0

Ich habe den folgenden Code:Rahmen Quelle Änderungserkennung

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

Ich weiß, das funktionieren soll (und es tut), wie der Alarm Popup tut. Ich erhalte jedoch einen Fehler [Uncaught ReferenceError: contentChanged ist nicht definiert]. Was mache ich falsch? Hinweis: Ich lade den Quellcode über Angular, aber benötigt einfaches JavaScript, um zu erkennen, dass sich die Rahmenquelle ändert, wenn außerhalb von Angular im iFrame auf eine Verknüpfung geklickt wird.

Quelle

2016-06-24 Artvader

+0

Ich sollte erwähnen, dass die oben als TemplateUrl in einer Winkel Richtlinie geladen wird, wenn das hilft. Und ich bekomme den Fehler, egal wo ich das Skript anlege. – Artvader

+0

UPDATE: Ich legte das Skript unmittelbar über dem schließenden-Tag und isoliert es von anderen Skripten, die ich benutze, und der Fehler ist weg. – Artvader

Antwort

2

Ihr Code-Snippet ist absolut richtig. Nur Fehler ist die Art und Weise, wie Sie erklärt haben und es wegen JavaScript Variable hissen.

Ihr Code sollte wie folgt sein.

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

The difference is in your function is only defined when that line is reached, whereas above function is defined as soon as its surrounding function or script is executed, due to hoisting .

diesem einfachen Beispiel Siehe - http://www.w3schools.com/js/js_hoisting.asp

Quelle

2016-06-24 03:46:59

+0

Ihre Lösung funktionierte nicht alleine, aber gab mir eine Idee, mein Problem zu lösen, also werde ich dies als die richtige Antwort markieren. – Artvader

+0

seltsam, das Arbeitsbeispiel ist da in der Frage. Für mich geht das. –

+0

@Artvader Dies ist nicht anders als die Antwort von guest271314, die zuerst gepostet wurde ... Beachten Sie, dass variable Hubs nicht '

1

Ersetzen Sie die Funktionsdeklaration für var Anweisung, die anonyme Funktion aufruft. Siehe 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>

Quelle

2016-06-24 03:34:01 guest271314

+0

Auch tat das. Eigentlich war das das erste was ich versuchte, aber immer noch den Fehler in der Konsole. So seltsam... – Artvader

+0

Versuchen Sie '