2015-12-15 4 views
0

я гнал мою editor.html в IFRAME, используя этот код:Iframe Дом ошибка: не может прочитать свойство «SRC» нулевой

<iframe name= "iframeEditor" id="ifrm" src="editor.html" width="1000" height="500" frameborder="0"></iframe> 

то, что я должен получить доступ к элементу в индукторе сценария в моем "editor.html":

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>Diagram</title> 
    <script type="text/javascript" src="lib/jquery-1.8.1.js"></script> 
    <!-- I use many resources --> 
    <script> 
     function generatePNG (oViewer) { 
      var oImageOptions = { 
       includeDecoratorLayers: false, 
       replaceImageURL: true 
      }; 

      var sResult = 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"); 
        image.src = base64data; 
        document.body.appendChild(image); 
       } 
      }, "image/png", oImageOptions); 
      return sResult; 
     } 
    </script> 
</head> 
<body > 
    <div id="diagramContainer"></div> 
</body> 
</html> 

я должен получить доступ к image.src из фрейма, которые содержат мой editor.htm так я стараюсь с этим кодом:

<script> 
var if1 = document.getElementById("ifrm"); 
var fc = (if1.contentWindow || if1.contentDocument); 
var img1 = fc.document.getElementById("GraphImage"); 
console.log(img1.src); 
</script> 

, но я получаю сообщение об ошибке: не может прочитать свойство «Src» нулевые

+0

Вы уверены, что ваш скрипт запускается после загрузки изображения? Добавьте некоторый console.log для обратного вызова onloadend и проверьте, вызывается ли оно перед ошибкой. –

+0

Я добавил console.log в обратный вызов onloadend, но когда я запускаю скрипт, я не получаю его, я просто получаю сообщение об ошибке на консоли – ameni

+0

, и это означает, что вы запускаете свой скрипт перед загрузкой изображения. Запустите свой скрипт в конце обратного вызова onloadend –

ответ

0

Вы работаете скрипт, который выглядит для элемента изображения перед загрузкой изображения, поэтому он еще не добавлен в DOM.

переместить сценарий в отдельную функцию:

function yourScript() { 
    var if1 = document.getElementById("ifrm"); 
    var fc = (if1.contentWindow || if1.contentDocument); 
    var img1 = fc.document.getElementById("GraphImage"); 
    console.log(img1.src); 
} 

и запустить его в конце onloadend обратного вызова:

function generatePNG (oViewer) { 
     var oImageOptions = { 
      includeDecoratorLayers: false, 
      replaceImageURL: true 
     }; 

     var sResult = 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"); 
       image.src = base64data; 
       document.body.appendChild(image); 
       yourScript(); // your script is run after appending image to body 
      } 
     }, "image/png", oImageOptions); 
     return sResult; 
    } 
+0

, но моя функция находится в файле iframe: function onMyFrameLoad() { var if1 = document.getElementById (" ifrm "); var fc = (if1.contentWindow || if1.contentDocument); var img1 = fc.document.getElementById ("GraphImage"); console.log (img1.src); } – ameni

+0

, когда я добавляю его в свой editor.html, я получаю ошибку: не могу прочитать документ null, и мне нужно получить доступ к dom из iframe – ameni