Last HTML-Inhalt mit jquery

fragen, ob es posible HTML-Inhalten auf diese Weise zu laden:Last HTML-Inhalt mit jquery

ich dieses Stück Code habe in JS

var main = [{ 
    title:'Title', 
    imageProject: 'images/t1.jpg', 
    content: 'page1.html' 
},{ 
    title:'Title2', 
    imageProject: 'images/t2.jpg', 
    content: 'page2.html' 
},{ 
    title:'Title3', 
    imageProject: 'images/t3.jpg', 
    content: 'page3.html' 
}] 

container = $('<div />', {class:'container'}); 

$.each(main, function(i, e){ 
    var item = $('<div />', { 
    class:'item', 
    html:'<div><img src="' + e.imageProject + '" class="img-responsive" alt="' + e.title + '"><h2>' + e.title + '</h2></div>' + 
    '<div class="content"><p>' + e.content + '</p></div></div>' 
    }) 
    container.append(item); 
}); 
container.appendTo($('main'));

Das Ziel ist es, eine HTML-Datei zu den Variablen zugewiesen werden Inhalt, der innerhalb der Funktion verwendet wird, in der ich die HTML-Struktur erzeuge. Ist das möglich?

Vielen Dank im Voraus.

Quelle

2017-02-17 tanaan

Sie möchten dynamische Includes durchführen und die Including-Client-Seite übernehmen? Sicher, das ist möglich. Beachten Sie auch, dass das, was Sie gerade tun, sich bis zur Injektion und ungültigem HTML erweitert. Verketten Sie keine willkürlichen Daten in einen HTML-Kontext. Jedes Mal, wenn Sie Daten verwenden und sie in einem anderen Kontext verwenden, muss sie maskiert werden. Das Beste, was Sie hier tun können, ist, die Elemente zu erstellen und ihre Attribute festzulegen. – Brad

Danke Brad. Ich wollte nur wissen, ob es möglich ist, eine HTML-Datei genauso zu laden wie ich mit den anderen Objekten in der Variablen main. Ich meine, es ist einfach, einfachen Text zB mit e.title zu laden, aber ich weiß nicht, ob ich eine HTML-Datei mit e.content laden kann. Danke vielmals. – tanaan

könnten Sie eine Ajax-Anfrage verwenden, um Ihre HTML-Inhalt Werfen Sie einen Blick, wenn diese Loading DIV content via ajax as HTML

Quelle

2017-02-17 23:39:20 vladwoguer

Danke für die Antwort vladwoguer. Ich habe diesen Beitrag gelesen, bin mir aber nicht sicher, ob das den Job erledigen könnte, tut mir leid, wenn ich es nicht richtig verstanden habe. Wie Sie sehen, erzeuge ich ein div mit dem Klassencontainer, dann einige divs mehr, abhängig von der Anzahl der Objekte in der Variablen main. Jedes dieser divs wird das Klassenelement haben und sie werden einen anderen HTML-Code haben, der mit dem Inhalt innerhalb jedes Objekts gefüllt wird. Das Problem ist, dass ich dem e.content eine HTML-Datei hinzufügen möchte. Ich habe den Weg in der Post, den du gesagt hast, nicht gesehen. Entschuldigung, wenn ich etwas falsch verstanden habe. – tanaan

Hallo Tanaan, mit Ajax können Sie die HTML-Datei anfordern und Sie können sie auf Ihrem e.content laden. Lass mich sehen, ob ich ein besseres Beispiel finden kann. – vladwoguer

Danke vladwoguer, das wurde aussortiert. Ich werde versuchen, mich später zu antworten. Wenn ich jedem '.content' eine ID gebe, muss ich 'load();' verwenden. Aus irgendeinem Grund funktioniert es nur auf dem Server, aber es tut es. Obwohl diese ID hilft, wenn ich in Zukunft mit jedem Element interagieren muss. Nochmals vielen Dank für die Pflege. – tanaan

hilft Als vladwoguer oben sagt, ein Ajax-Request ist der Weg, den Inhalt Ihrer HTML-Seiten abrufen, aber Sie‘ Ich brauche etwas, um den von Ihnen angeforderten Inhalt zu bedienen.

Ein einfaches PHP-Skript auf der Serverseite kann die angeforderte Datei öffnen und den Inhalt als String ausgeben, der von Jquery auf die gleiche Weise wie eine String-Konstante interpretiert wird.

Quelle

2017-02-17 23:57:34

Danke John, ich weiß, dass es viele Möglichkeiten gibt, eine HTML-Datei mit JS oder PHP zu laden (diese Option kann ich leider nicht benutzen). Ich möchte nur e.content eine HTML-Datei zuweisen, die innerhalb des generierten HTML geladen wird, wie ich es mit den restlichen Objekten mache. Danke vielmals. – tanaan

Wie wäre es, e.content zu einem iframe-Tag zu machen, das die gewünschte HTML-Seite als Quelle hat?

Sie könnten sogar "border: none" zum Stil des iframe hinzufügen, so dass es sich besser in die Seite einfügt. Sie müssen durch einige Ringe springen, um die Seite innerhalb des iframe zu ändern (wenn das sogar notwendig ist), aber es ist machbar.

Quelle

2017-02-18 01:45:42

Last HTML-Inhalt mit jquery

Antwort

Verwandte Themen