Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
389 views
in Technique[技术] by (71.8m points)

javascript - instanceof HTMLElement in IFRAME is not Element or Object?

Trying determinate DOM Element by simple check

isElement = SomeThing instanceof Element

works in main document, but not on (all?) nodes in iframe.

Example output (Google Chrome): (mdiv is DIV in main document, idiv is DIV in iframe)

OMGWTF 
ok:  mdiv instanceof Element ... true ... [object HTMLDivElement]
ok:  mdiv instanceof Object ... true ... [object HTMLDivElement]
ko:  idiv instanceof Element ... false ... [object HTMLDivElement]
KO :  idiv instanceof Object ... false ... [object HTMLDivElement] 

There are different javascript implementations for main document and for iframe documents ???

Please explain me what's wrong.

Example: (http://www.sbmintegral.sk/GITHUB/OMGWTF/obalka.xhtml)

Code: obalka.xhtml (main document)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <title>Obalka</title>
  </head>
  <body>
    <div id="auto_filled_commands_container">
MAIN div id="auto_filled_commands_container"<br/>
        <iframe id="auto_filled_commands_iframe" src='dopis.xhtml' style="width:98%;height:98%;"/>
    </div>
<div>
<textarea id="OMGWTF" style="width:700px;height:200px">
mdiv = document.getElementById("auto_filled_commands_container");
ifram = document.getElementById("auto_filled_commands_iframe");
idiv = ifram.contentDocument.getElementById('auto_filled_commands');
OMGWTF = "OMGWTF 
"
+"ok:  mdiv instanceof Element ... "+(mdiv instanceof Element)+" ... "+mdiv+"
"
+"ok:  mdiv instanceof Object ... "+(mdiv instanceof Object)+" ... "+mdiv+"
"
+"ko:  idiv instanceof Element ... "+(idiv instanceof Element)+" ... "+idiv+"
"
+"KO :  idiv instanceof Object ... "+(idiv instanceof Object)+" ... "+idiv+"
"
;
document.getElementById('result_txta').value = OMGWTF;
</textarea>
<br/><input type="button" value="Eval code in upper textarea (to bypass possible developer tools error)" onclick="
    eval(document.getElementById('OMGWTF').value);
"/><b>(2.)</b><br/>
<textarea id="result_txta" style="width:700px;height:100px">
</textarea>
</div>
  </body>
</html>

Code: Dopis.xhtml (inner frame document)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <title>Dopis</title>
  </head>
  <body>
    <div id="auto_filled_commands">
IFRAME div id="auto_filled_commands"<br/>
        <div id="afc_formular">
IFRAME div id="afc_formular"<br/>
<input id="cmnd" type="text" value="input id='cmnd'" />
<br/><input type="button" value="Click to get browser userAgent" onclick="
    var preEl = this.ownerDocument.getElementById('navUserAgent');
    var cdataEl = preEl.firstChild || preEl;    /* IE don't know CDATA ?! */
    cdataEl.textContent=navigator.userAgent;
"/><b>(1.)</b>
<pre id="navUserAgent"><![CDATA[
]]></pre>
        </div>
    </div>
  </body>
</html>

Results image (in IE, Chrome, Firefox, Opera) image omgwtf.png
(source: sbmintegral.sk)

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

There are different javascript implementations for main document and for iframe documents ???

Yes. The iframe has its own environment with its own globals. Try

var iwin = ifram.contentWindow;
idiv instanceof iwin.HTMLElement; // true
idiv instanceof iwin.Object; // true

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...