Einbetten mit iFrame

Question

Ich möchte eine Website für ein lokales Fußballteam erstellen, aber ich weiß nicht, wie ich die Tabelle auf der Website anzeigen kann, die unter http://wnl.org.uk/tables.htm verfügbar ist.

Ich kann einen iframe erstellen, aber es zieht die gesamte Seite ein und ich brauche nur eine der Tabellen. Ich möchte es auch reaktionsfähig machen und meine eigenen Stile anwenden, um mit meinem Thema übereinzustimmen.

Es ist nur eine Amateur-Liga, also ist es nicht über opta oder etwas ähnliches verfügbar, so bin ich mir nicht sicher, was der beste Ansatz ist.

Kann mir jemand helfen - Diese Frage ist mehr wie ich etwas tun kann, anstatt das ist, was ich habe. Ich bin mir nicht sicher, wie ich es erreichen kann.

Answer 1

Wenn die Seite, die Sie die Daten abrufen möchten in Ihrem Server können Sie die jQuery .load() Funktion wie folgt verwendet werden: (diese Methode ohne iframe ist)

<div id="target-div"> 
</div> 

Und als diesen Code verwenden:

$('#target-div').load('./tables.htm #main'); 

Wenn dieses Verfahren ausführt, ruft sie den Inhalt von ajax/test.html, aber dann parst jQuery das zurückgebrachte Dokument, das Element mit einer ID des Behältnisses zu finden. Dieses Element wird zusammen mit seinem Inhalt in das Element mit der ID Ziel-ID eingefügt, und der Rest des abgerufenen Dokuments wird verworfen.

.load() jQuery Dokumentation

Aber dies kann nur geschehen, wenn diese Seite in Ihrem Server vorhanden ist, weil er den Inhalt mit AJAX bekommt.

Hoffe, das hilft.

Another Way

Wenn Sie wollen, dass diese mit iframe zu tun, können Sie einige CSS-Tricks verwenden Sie nur den Teil der Seite, die Sie anzeigen möchten.

<div style="border: 2px solid #D5CC5A; overflow: hidden; margin: 15px auto; max-width: 575px;"> 
    <iframe scrolling="no" src="http://wnl.org.uk/tables.htm" style="border: 0px none; margin-left: -36px; height: 812px; margin-top: -486px; width: 650px;"> 
    </iframe> 
</div> 

Quelle: http://www.dimpost.com/2012/12/iframe-how-to-display-specific-part-of.html

Die Kehrseite der Medaille ist, dass Sie unterschiedliche Werte für die Ränder des iframe und die Breite des div manuell testen müssen, bis Sie das gewünschte Ergebnis erhalten.

Kürzester Weg mit PHP

1) Erstellen Sie eine Datei "tables.htm" und es leer lassen.

2) Erstellen Sie eine Datei "test.php" (Stellen Sie sicher, dass diese sich im selben Ordner befinden).

3) Fügen gibt diese Zeilen Code:

<?php 
    $contents = file_get_contents("http://wnl.org.uk/tables.htm"); 
    $file = fopen("tables.htm", "w") or die ("Unable to open file"); 
    fwrite($file, $contents); 
    fclose($file); 
    echo "Successful"; 
?> 

4) Führen Sie diese Datei in Ihrem Browser. Dadurch wird der Inhalt der Datei auf dieser Website in die Datei "tables.htm" in Ihrem Server geschrieben.

5) Nun, da die Datei geschrieben ist, greifen Sie auf ihre Daten unter Verwendung der oben erwähnten .load()-Funktion zu.

<div id="target-div"> 
</div> 
<script> 
    $('#target-div').load('tables.htm #main'); 
</script> 

6) Wenn Sie die Option „Cron Jobs“ in Ihrem Host haben, dass verwenden Sie das Skript „test.php“ in einer bestimmten Zeit laufen zu lassen, ohne dass Sie es in Ihrem Browser manuell ausführen.

Dies ist der beste Weg, den Sie tun können, und das Beste ist, dass Sie auch den Stil der Elemente ändern können.