Passen Sie die Iframe-Höhe jedes Mal an, wenn sich der Inhalt ändert ⇐ HTML

[Guest]

Ich habe ähnliche Fragen wie „Breite und Höhe des Iframes anpassen, um sie an den darin enthaltenen Inhalt anzupassen“ gesehen, aber ich denke, dass meine Frage anders ist.

Ich habe eine Tabelle in einem Iframe und nur wenige Suchfelder, meine Güte Die Suche erfolgt sofort (onkeyup) und nicht, nachdem ich auf eine Schaltfläche gedrückt habe.
Mein Problem ist, dass ich den Iframe nicht jedes Mal neu laden möchte, wenn ich etwas suche, sondern nur „filtern“ möchte. den Inhalt bei der Suche nach etwas. Ich verwende Datatables für meine Tabelle, wenn es hilft
Ich habe diesen Code ausprobiert, aber er funktioniert nur, wenn ich den i-Frame neu lade. Ich möchte auch, dass die Suche sofort erfolgt und keine Schaltfläche zum Suchen hinzugefügt wird.
mein JS-Code für die Höhe des Iframes:

Code: Select all

document.addEventListener('DOMContentLoaded', function() {

var iframe = document.getElementById("iframeindex");

if (iframe) {
iframe.onload = function() {
iframe.style.height = iframe.contentWindow.document.documentElement.scrollHeight + 'px';
};
}
});

und das ist der Such-JS-Code:

Code: Select all

    function applyTextFilter() {
// Volltext-Filter
const volltext = $("#volltext-filter", parent.document);
table.search(volltext.val()).draw();

// Name-Filter
const nameFilter = $("#name-filter", parent.document);
table.columns(1).search(nameFilter.val()).draw();

// Vorname-Filter
const vornameFilter = $("#vorname-filter", parent.document);
table.columns(2).search(vornameFilter.val()).draw();

// Abteilung-Filter
const abteilungFilter = $("#abteilung-filter", parent.document);
table.columns(9).search(abteilungFilter.val()).draw();
}

// Keyup-Event-Listener für alle Filter anwenden
$("#volltext-filter", parent.document).on('keyup', applyTextFilter);
$("#name-filter", parent.document).on('keyup', applyTextFilter);
$("#vorname-filter", parent.document).on('keyup', applyTextFilter);
$("#abteilung-filter", parent.document).on('keyup', applyTextFilter);

// Initiale Anwendung der Filter
applyTextFilter();

Ich verwende auch Datentabellen für meine Tabelle.