HTML in iframe mit Callback schreiben

Question

Wir bekommen Daten aus dem Backend und müssen es in eine iframe schreiben. Wir müssen die iframe Höhe auf die Höhe des Inhalts einstellen. Wir können nicht die richtige Höhe erreichen, bis der Inhalt tatsächlich IN iframe ist, was nicht sofort für eine große Menge an Inhalt ist. Gibt es einen Rückruf, um zu wissen, wann der Schreibvorgang abgeschlossen ist?

Im Moment haben wir einen Timer haben, aber es ist spröde Code:

//data received from backend  
//write data to iframe 
//$iframe is a jQuery DOM element 
$iframe[0].contentDocument.open(); 
$iframe[0].contentDocument.write(data); 
$iframe[0].contentDocument.close(); 

setTimeout(function(){ 
    var scrollHeight = $iframe.contents().find('body')[0].scrollHeight 
      $iframe.css("height", scrollHeight); 
}, 1000); 

Answer 1

Haben Sie versucht, hört für die load Veranstaltung auf der iframe?

var doc = $iframe[0].contentDocument 
doc.open() 
doc.write(data) 
doc.close() 

$iframe.on('load', function() { 
    this.style.height = doc.body.scrollHeight + 'px' 
}) 

Answer 2

iframes tun ein onload-Event haben:

$iframe[0].contentDocument.open(); 
 
$iframe[0].contentDocument.write(data); 
 
$iframe[0].contentDocument.close(); 
 

 
$iframe.onload = function() { 
 
    var scrollHeight = $iframe.contents().find('body')[0].scrollHeight 
 
    $iframe.css("height", scrollHeight); 
 
};

Answer 3

vielleicht postMessage wird Ihnen helfen.

var testData = 'test\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\ntest\n'; 
var $iframe = document.querySelector('#test-iframe'); 
var $button = document.querySelector('button'); 

// listen the callback message from iframe 
window.self.addEventListener('message', function(ev) { 
    if (ev.data && ev.data.status === 'ready') { 
     $iframe.style.height = ev.data.height + 'px'; 
    } 
}); 


$button.addEventListener('click', function() { 
    // render content 
    $iframe.contentDocument.body.innerText = testData; 
    // send message to the top window 
    window.self.postMessage({ 
     status: 'ready', 
     height: $iframe.contentDocument.body.scrollHeight 
    }, '*'); 
}); 
` 

https://jsfiddle.net/caoyy/Lb5k13bw/2/

Answer 4

Ihre beste Möglichkeit ist mutationObserver im iFrame zu verwenden. Das ist nicht ganz so einfach wie ein Rückruf, fürchte ich.

Hier ist der Code der iFrame-resizer Bibliothek verwendet, um dies auszuarbeiten. Sie müssten die Zeile ändern, die sendSize aufruft, um Ihre Rückrufmethode aufzurufen.

function setupBodyMutationObserver(){ 
    function addImageLoadListners(mutation) { 
     function addImageLoadListener(element){ 
      if (false === element.complete) { 
       console.log('Attach listeners to ' + element.src); 
       element.addEventListener('load', imageLoaded, false); 
       element.addEventListener('error', imageError, false); 
       elements.push(element); 
      } 
     } 

     if (mutation.type === 'attributes' && mutation.attributeName === 'src'){ 
      addImageLoadListener(mutation.target); 
     } else if (mutation.type === 'childList'){ 
      Array.prototype.forEach.call(
       mutation.target.querySelectorAll('img'), 
       addImageLoadListener 
      ); 
     } 
    } 

    function removeFromArray(element){ 
     elements.splice(elements.indexOf(element),1); 
    } 

    function removeImageLoadListener(element){ 
     console.log('Remove listeners from ' + element.src); 
     element.removeEventListener('load', imageLoaded, false); 
     element.removeEventListener('error', imageError, false); 
     removeFromArray(element); 
    } 

    function imageEventTriggered(event,type,typeDesc){ 
     removeImageLoadListener(event.target); 
     sendSize(type, typeDesc + ': ' + event.target.src, undefined, undefined); 
    } 

    function imageLoaded(event) { 
     imageEventTriggered(event,'imageLoad','Image loaded'); 
    } 

    function imageError(event) { 
     imageEventTriggered(event,'imageLoadFailed','Image load failed'); 
    } 

    function mutationObserved(mutations) { 
     sendSize('mutationObserver','mutationObserver: ' + mutations[0].target + ' ' + mutations[0].type); 

     //Deal with WebKit asyncing image loading when tags are injected into the page 
     mutations.forEach(addImageLoadListners); 
    } 

    function createMutationObserver(){ 
     var 
      target = document.querySelector('body'), 

      config = { 
       attributes   : true, 
       attributeOldValue  : false, 
       characterData   : true, 
       characterDataOldValue : false, 
       childList    : true, 
       subtree    : true 
      }; 

     observer = new MutationObserver(mutationObserved); 

     console.log('Create body MutationObserver'); 
     observer.observe(target, config); 

     return observer; 
    } 

    var 
     elements   = [], 
     MutationObserver = window.MutationObserver || window.WebKitMutationObserver, 
     observer   = createMutationObserver(); 

    return { 
     disconnect: function(){ 
      if ('disconnect' in observer){ 
       console.log('Disconnect body MutationObserver'); 
       observer.disconnect(); 
       elements.forEach(removeImageLoadListener); 
      } 
     } 
    }; 
}