2015-12-27 52 views
1

我想加载使用JavaScript,然后访问DOM,并从我的HTML文件ID获取元素一个html文件到iframe,这是我的代码:加载HTML和访问DOM

<html> 
    <head> 
     <iframe id="myframe" src="editor1.html" onload="onMyFrameLoad()"></iframe> 
    </head> 
    <body > 
    <script> 
     function onMyFrameLoad() { 
       alert('myframe is loaded'); 
       var if1 = document.getElementById("myframe"); 
       var fc = (if1.contentWindow || if1.contentDocument); 
       var img1 = fc.document.getElementById("GraphImage"); 
       console.log(img1.src); 
     }; 
    </script> 
    </body> 
</html> 

这是我的HTML“editor.html”的一部分:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Diagram</title>  
<script> 
    // i have here other functions to create an editor 
    function generatePNGFromBLOB(oViewer) { 
     a=1000; 
     var oImageOptions = { 
      includeDecoratorLayers: false, 
      replaceImageURL: true 
     }; 

     var d = new Date(); 
     var h = d.getHours(); 
     var m = d.getMinutes(); 
     var s = d.getSeconds(); 

     var sFileName = "diagram" + h.toString() + m.toString() + s.toString() + ".png"; 
     var sResultBlob = oViewer.generateImageBlob(function(sBlob) { 
      b = 64; 
      var reader = new window.FileReader(); 
      reader.readAsDataURL(sBlob); 
      reader.onloadend = function() { 
       base64data = reader.result; 
       var image = document.createElement('img'); 
       image.setAttribute("id", "GraphImage"); 
       //code image in base 64 
       image.src = base64data; 
       document.body.appendChild(image); 
      } 

     }, "image/png", oImageOptions); 
     return sResultBlob; 
    } 

    $(document).ready(function() { 
     var sBlob = JSON.stringify({ 
      "contents": { //string} 
      } 
     }); 

     var sResultBlob = generatePNGFromBLOB(oEditor.viewer); 

    }); 
</script> 


</head> 

<body> 
    <div id="diagramContainer"></div> 
</body> 
</html> 

所以我试图做的是加载我editor.htmliframe,然后从IFRAME访问和获取image.srceditor.html。 我尝试,但我得到的错误:

cannot read src of null

+0

尝试让iFrame的'innerHTML',然后加载到这一个基本的虚拟DOM,然后从[使用JavaScript读取IFrame的内容]那 –

+0

可能重复提取'img.src'(HTTP:/ /stackoverflow.com/questions/2777316/read-iframe-content-using-javascript) – LGSon

+0

适合我的作品:http://randume.org/testscrpts/test2.php。检查图像是否正在创建?也可能与''中的iframe有关。尝试将其移动到身体。 – k97513

回答

0

如果您有包含于iframe页面jQuery库,你可以试试下面找到iframe的父母;

$('#domElem', window.parent.document).html();