2015-12-27 2 views
1

Я хочу, чтобы загрузить HTML файл в iframe с помощью JavaScript, а затем получить доступ к DOM и получить элемент по идентификатору из моего HTML файла, это мой код:нагрузки HTML в iframe, и получить доступ к 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.html в iframe, то доступ из фрейма и получить image.src от моего editor.html. Я стараюсь, но я получаю сообщение об ошибке:

cannot read src of null

+0

Попробуйте получать 'innerHTML' в плавающем фрейме, а затем загружаются, что в основной виртуальный йот, затем извлекая' img.src' из этого –

+0

Возможного дубликата [содержания Чтения IFrame с помощью JavaScript] (HTTP://stackoverflow.com/questions/2777316/read-iframe-content-using-javascript) – LGSon

+0

Прекрасно работает для меня: http://randume.org/testscrpts/test2.php. Проверьте, создается ли изображение? Также может быть связано с тем, что iframe находится в ''. Попробуйте переместить его в тело. – k97513

ответ

0

Если у вас есть библиотека JQuery включена в IFrame странице, Вы можете попробовать следующее, чтобы найти родитель фрейма;

$('#domElem', window.parent.document).html(); 
Смежные вопросы