2016-08-13 4 views
2

Dieser blies heute meiner Meinung nach, check it out:iframe + instanceof Object FAIL

index.html

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title>framed</title> 
 
</head> 
 
<body> 
 
    <iframe src="sandbox2.html" frameborder="0" width="640" height="480" id="frame"></iframe> 
 
</body> 
 
</html>

sandbox2.html (Innenseiten des iframe)

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
</head> 
 
<body> 
 
    <h1>instanceof Object FAIL DEMO</h1> 
 
    <div id="foo"></div> 
 
    #foo.bar instanceof Object: <span id="result"></span> 
 
    <br/> 
 
    typeof #foo.bar: <span id="result2"></span> 
 

 
    <script> 
 
     document.addEventListener("DOMContentLoaded", function() { 
 
      document.getElementById('foo').bar = { test: 'aaa' }; 
 
      setInterval(function() { 
 
       document.getElementById('result').textContent = (document.getElementById('foo').bar instanceof Object).toString(); 
 
       document.getElementById('result2').textContent = (typeof document.getElementById('foo').bar).toString(); 
 
      }, 100); 
 
     }); 
 
    </script> 
 
</body> 
 
</html>

gehen 10

nun offen index.html, an die Entwickler-Konsole und geben

document.getElementById("frame").contentDocument.getElementById('foo').bar = {} 

typeof #foo.bar kehrt object (und foo ist eigentlich ein Object)

Aber #foo.bar instanceof Object kehrt falsch !!!!

Ich habe versucht Chrome, Firefox und MS Edge, alle haben das gleiche Verhalten. Warum passiert dies? Ist das eine Art Bug?

+0

was bedeutet '# foo.bar instanceof Object' bedeuten in Echt Javascript –

+0

' document.getElementById ('foo'). Bar instanceof Object' es in sandbox2.html –

+0

genau dort ist, wenn ich zwei Dateien erstellen, wie Sie haben die Ausgabe '# foo.bar instanceof Object: true' 'typeof # foo.bar: object' - haben Sie das erwartet? –

Antwort

0

Änderung sandbox2.html zu

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
</head> 
<body> 
    <h1>instanceof Object FAIL DEMO</h1> 
    <div id="foo"></div> 
    #foo.bar instanceof Object: <span id="result"></span> 
    <br/> 
    #foo.bar instanceof parent.Object: <span id="result1"></span> 
    <br/> 
    typeof #foo.bar: <span id="result2"></span> 

    <script> 
     document.addEventListener("DOMContentLoaded", function() { 
      document.getElementById('foo').bar = { test: 'aaa' }; 
      setInterval(function() { 
       document.getElementById('result').textContent = (document.getElementById('foo').bar instanceof Object).toString(); 
       document.getElementById('result1').textContent = (document.getElementById('foo').bar instanceof parent.Object).toString(); 
       document.getElementById('result2').textContent = (typeof document.getElementById('foo').bar).toString(); 
      }, 100); 
     }); 
    </script> 
</body> 
</html> 

Jetzt werden Sie sehen, dass aus dem Hauptrahmen zu ändern, das Objekt in der iframe es von einem instanceOf Objekt zu einem instanceOf parent.Object ändern wird - die beiden sind verschiedene Objekte