Heim >
Artikel > Web-Frontend > Erstellen einer Meta-Tags-Scraping-API in Unterzeilen mit Code
Erstellen einer Meta-Tags-Scraping-API in Unterzeilen mit Code
DDDOriginal
2024-10-21 16:33:02407Durchsuche
Haben Sie sich jemals gefragt, wie Sie mit Messaging-Apps wie WhatsApp oder Telegram eine Vorschau eines von Ihnen gesendeten Links sehen können?
WhatsApp- und Telegram-URL-Vorschau
In diesem Beitrag erstellen wir mit Deno eine Scraping-API, die eine URL akzeptiert und die Meta-Tags dafür abruft, sodass wir Felder wie Titel, Beschreibung, Bild und mehr von fast jeder Website abrufen können.
{
"last-updated": "2024-10-15 15:10:02 UTC",
"user-signed-in": "false",
"head-cached-at": "1719685934",
"environment": "production",
"description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
"keywords": "software development, engineering, rails, javascript, ruby",
"og:type": "website",
"og:url": "https://dev.to/",
"og:title": "DEV Community",
"og:image": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
"og:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
"og:site_name": "DEV Community",
"twitter:site": "@thepracticaldev",
"twitter:title": "DEV Community",
"twitter:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
"twitter:image:src": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
"twitter:card": "summary_large_image",
"viewport": "width=device-width, initial-scale=1.0, viewport-fit=cover",
"apple-mobile-web-app-title": "dev.to",
"application-name": "dev.to",
"theme-color": "#000000",
"forem:name": "DEV Community",
"forem:logo": "https://media.dev.to/cdn-cgi/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png",
"forem:domain": "dev.to",
"title": "DEV Community"
}
ziemlich cool, nicht wahr?
Meta-Tags und warum wir sie brauchen
Meta-Tags sind HTML-Elemente, die verwendet werden, um Suchmaschinen und anderen Clients zusätzliche Informationen über eine Seite bereitzustellen.
Diese Tags umfassen normalerweise ein Namens- oder Eigenschaftsattribut, das die Art der Informationen definiert, und ein Inhaltsattribut, das den Wert dieser Informationen enthält. Hier ist ein Beispiel für zwei Meta-Tags:
<meta name="description" content="The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.">
<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.cd6c4a5a.png">
Das erste Tag enthält eine Beschreibung der Seite, während das zweite ein Open Graph-Tag ist, das ein Bild definiert, das angezeigt werden soll, wenn die Seite in sozialen Medien geteilt wird.
Eine praktische Anwendung von Meta-Tags ist die Erstellung eines Lesezeichen-Managers. Anstatt den Titel, die Beschreibung und das Bild für jedes Lesezeichen manuell hinzuzufügen, können Sie diese Informationen mithilfe von Meta-Tags automatisch aus der mit Lesezeichen versehenen URL entfernen.
Diagramm öffnen
Open Graph ist ein Internetprotokoll, das ursprünglich von Facebook entwickelt wurde, um die Verwendung von Metadaten innerhalb einer Webseite zur Darstellung des Inhalts einer Seite zu standardisieren. Es hilft sozialen Netzwerken, umfangreiche Linkvorschauen zu erstellen.
Lesen Sie hier mehr darüber.
Warum Deno?
Deno verfügt über sichere Standardeinstellungen, was bedeutet, dass eine explizite Genehmigung für den Datei-, Netzwerk- und Umgebungszugriff erforderlich ist, wodurch das Risiko von Sicherheitslücken verringert wird.
Deno basiert auf Webstandards, verwendet ES-Module und zielt darauf ab, Webplattform-APIs (wie Fetch) anstelle proprietärer APIs zu verwenden, wodurch der Deno-Code dem Code, den Sie im Browser schreiben, sehr ähnlich ist – aber dennoch einige Spezifikationen aufweist Abweichung vom Browser.
Deno verfügt über integrierte TypeScript-Unterstützung, sodass Sie TypeScript-Code ohne Build-Schritt schreiben können.
Deno wird mit einer Standardbibliothek geliefert, die Module für allgemeine Aufgaben wie HTTP-Server, Dateisystemoperationen und mehr enthält.
Deno bietet einen Linter, Formatter und Test Runner, sodass Sie die Plattform nutzen können, anstatt sich auf Pakete oder Tools von Drittanbietern verlassen zu müssen, was sie zu einem All-in-one-Tool für die Javascript-Entwicklung macht.
Deno bietet Deno Deploy, eine skalierbare Plattform für serverlose JavaScript-/Typescript-Anwendungen, die weltweit verteilt sind und minimale Latenz und maximale Betriebszeit gewährleisten.
Die API, die wir erstellen, wird aus zwei Teilen bestehen, einer Funktion zum Abrufen und Parsen der Meta-Tags und einem API-Server, der auf HTTP-Anfragen antwortet.
Abrufen der Meta-Tags
Beginnen wir damit, dass wir zu Deno Deploy gehen und uns anmelden.
Klicken Sie nach der Anmeldung auf „Neuer Spielplatz“
Damit geben wir uns einen Hallo-Welt-Ausgangspunkt.
Jetzt fügen wir eine Funktion namens getMetaTags hinzu, die eine URL akzeptiert und die Fetch-API verwendet, um den HTML-Code der angeforderten URL abzurufen und ihn an ein Paket zur HTML-Analyse (deno-dom) weiterzuleiten.
Um deno-dom zu unserem Projekt hinzuzufügen, können wir den jsr-Paketmanager verwenden:
Jetzt verwenden wir die Fetch-API, um den HTML-Code als Text abzurufen:
{
"last-updated": "2024-10-15 15:10:02 UTC",
"user-signed-in": "false",
"head-cached-at": "1719685934",
"environment": "production",
"description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
"keywords": "software development, engineering, rails, javascript, ruby",
"og:type": "website",
"og:url": "https://dev.to/",
"og:title": "DEV Community",
"og:image": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
"og:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
"og:site_name": "DEV Community",
"twitter:site": "@thepracticaldev",
"twitter:title": "DEV Community",
"twitter:description": "A constructive and inclusive social network for software developers. With you every step of your journey.",
"twitter:image:src": "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8lvvnvil0m75nw7yi6iz.jpg",
"twitter:card": "summary_large_image",
"viewport": "width=device-width, initial-scale=1.0, viewport-fit=cover",
"apple-mobile-web-app-title": "dev.to",
"application-name": "dev.to",
"theme-color": "#000000",
"forem:name": "DEV Community",
"forem:logo": "https://media.dev.to/cdn-cgi/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png",
"forem:domain": "dev.to",
"title": "DEV Community"
}
Nachdem wir den HTML-Code erhalten haben, können wir ihn mit deno-dom analysieren und dann Standard-DOM-Funktionen wie querySelectorAll verwenden, um alle Meta-HTML-Elemente abzurufen, sie zu iterieren und getAttribute zu verwenden, um den Namen, die Eigenschaft und den Inhalt jedes einzelnen abzurufen dieser Tags:
<meta name="description" content="The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.">
<meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.cd6c4a5a.png">
Abschließend fragen wir noch den
Element der Seite, um es als Feld in unserer API hinzuzufügen:<br>
</p>
<pre class="brush:php;toolbar:false">import { DOMParser, Element } from "jsr:@b-fuze/deno-dom";
</pre>
<p>Es ist nicht gerade ein Meta-Tag, aber ich denke, dass es ein nützliches Feld ist, also wird es trotzdem Teil unserer API sein. :)</p>
<p>Unsere endgültige getMetaTags-Funktion sollte so aussehen:<br>
</p>
<pre class="brush:php;toolbar:false"> const headers = new Headers();
headers.set("accept", "text/html,application/xhtml+xml,application/xml");
const res = await fetch(url, { headers });
const html = await res.text();
</pre>
<h2>
Der Server
</h2>
<p>Der Einfachheit halber habe ich mich entschieden, den integrierten http-Server von Deno zu verwenden, der nur ein einfacher Deno.serve()-Aufruf ist.<br>
Dank der Tatsache, dass deno auf Webstandards basiert, können wir das integrierte Response-Objekt in der Fetch-API verwenden, um auf Anfragen zu antworten.<br>
</p>
<pre class="brush:php;toolbar:false">curl https://metatags.deno.dev/api/meta?url=https://dev.to
</pre>
<p>Unser Server analysiert die Anforderungs-URL, prüft, ob wir eine GET-Anfrage an den /api/meta-Pfad erhalten haben, ruft die von uns erstellte getMetaTags-Funktion auf und gibt dann die Meta-Tags als Antworttext zurück.</p>
<p>Wir fügen außerdem zwei Header hinzu. Der erste ist Content-Type, der benötigt wird, damit der Client weiß, welche Art von Daten er in der Antwort erhält, in unserem Fall eine JSON-Antwort.</p>
<p>Der zweite Header ist „Access-Control-Allow-Origin“, der es unserer API ermöglicht, Anfragen von bestimmten Ursprüngen zu akzeptieren. In unserem Fall habe ich „*“ gewählt, um jeden Ursprung zu akzeptieren, aber vielleicht möchten Sie es ändern, um nur Anfragen von zu akzeptieren Der Ursprung Ihres Frontends.<br>
Beachten Sie, dass die CORS-Header nur vom Browser gestellte Anfragen betreffen. Das bedeutet, dass der Browser die Anfrage entsprechend dem im Header angegebenen Ursprung blockiert, ein direkter Aufruf der API von einem Server jedoch weiterhin möglich ist. Lesen Sie hier mehr über CORS.</p>
<p>Sie können jetzt auf „Speichern und bereitstellen“ klicken<br>
<img src="https://img.php.cn/upload/article/000/000/000/172949959089268.jpg" alt="Building a Meta Tags Scraping API in Under Lines of Code"><br>
Warten Sie dann, bis Deno Deploy Ihren Code auf dem Playground bereitstellt:<br>
<img src="https://img.php.cn/upload/article/000/000/000/172949959198494.jpg" alt="Building a Meta Tags Scraping API in Under Lines of Code"><br>
Die URL oben rechts ist die URL Ihres Spielplatzes. Kopieren Sie sie und fügen Sie /api/meta?url=https://dev.to hinzu, um sie in Aktion zu sehen. Die URL sollte etwa wie https://metatags.deno.dev aussehen /api/meta?url=https://dev.to<br>
Sie sollten nun sehen, dass die API mit den Meta-Tags von dev.to antwortet!<br>
<img src="https://img.php.cn/upload/article/000/000/000/172949959294656.jpg" alt="Building a Meta Tags Scraping API in Under Lines of Code"></p>
<h2>
Einsatz
</h2>
<p>Die Verwendung des Playgrounds von Deno Deploy bedeutet, dass Ihr Code technisch gesehen bereits bereitgestellt, öffentlich und für jedermann zugänglich ist.<br>
Für eine einfache API wie die, die wir erstellen, kann ein Spielplatz mit einer einzigen Datei ausreichen, aber in vielen Fällen möchten wir unser Projekt gerne weiter skalieren, dafür können Sie den Github-Export von Deno Deploy verwenden, um ein geeignetes Code-Repository dafür zu erstellen Sie API, mit Unterstützung für die automatische Erstellung neuer Code-Pushs:<br>
<img src="https://img.php.cn/upload/article/000/000/000/172949959428755.jpg" alt="Building a Meta Tags Scraping API in Under Lines of Code"><br>
oder über die Einstellungen des Spielplatzes:<br>
<img src="https://img.php.cn/upload/article/000/000/000/172949959544011.jpg" alt="Building a Meta Tags Scraping API in Under Lines of Code"></p>
<h2>
Vorbehalte
</h2>
<p>Die in diesem Beitrag vorgestellte Scraping-Methode funktioniert nur auf Websites, deren vom Server zurückgegebene HTML-Datei Meta-Tags enthält. Das bedeutet, dass vom Server gerenderte oder vorgerenderte Websites mit größerer Wahrscheinlichkeit korrekte Ergebnisse liefern. Single-Page-Apps können auch so lange funktionieren da die Meta-Tags zur Build-Zeit und nicht zur Laufzeit festgelegt werden.</p>
<h2>
Abschluss
</h2>
<p>Wir haben gezeigt, wie schnell und einfach es ist, eine API mit Deno zu erstellen und bereitzustellen, wir haben Meta-Tags besprochen und wie wir die Fetch-API, einen DOM-Parser und den integrierten Server von Deno verwenden können, um eine zu erstellen Meta-Tags-Scraping-API in weniger als 40 Codezeilen.</p>
<p>Um das in diesem Beitrag erstellte Projekt zu sehen, können Sie sich den Deno-Deploy-Playground ansehen (Sie müssen /api/meta?url=https://dev.to zur URL-Leiste auf der rechten Seite hinzufügen, um eine zu sehen Beispielantwort) oder dieses Github-Repository.</p>
<hr>
<h2>
Was werden Sie als Nächstes bauen?
</h2>
<p>Ich hoffe, dieser Beitrag hat Sie dazu inspiriert, die Leistungsfähigkeit von Meta-Tags und Deno zu erkunden! Versuchen Sie, Ihre eigene Version der API zu erstellen oder sie wie einen Lesezeichen-Manager in ein Projekt zu integrieren. </p>
<p>Sie sind nicht weitergekommen, haben Fragen oder möchten zeigen, was Sie gebaut haben? Schreiben Sie unten einen Kommentar oder verbinden Sie sich mit mir auf Twitter/X – ich würde mich freuen, von Ihnen zu hören! </p>
<p>Schauen Sie sich hier meinen vorherigen Beitrag über den Aufbau einer React State Management-Bibliothek in weniger als 40 Codezeilen an.</p>
<p>Das obige ist der detaillierte Inhalt vonErstellen einer Meta-Tags-Scraping-API in Unterzeilen mit Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">typescript</a> <a href="javascript:void(0);">json</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Object</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">while</a> <a href="javascript:void(0);">include</a> <a href="javascript:void(0);">try</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">public</a> <a href="javascript:void(0);">finally</a> <a href="javascript:void(0);">Attribute</a> <a href="javascript:void(0);">Property</a> <a href="javascript:void(0);">copy</a> <a href="javascript:void(0);">function</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">display</a> <a href="javascript:void(0);">github</a> <a href="javascript:void(0);">serverless</a> <a href="javascript:void(0);">kind</a> <a href="javascript:void(0);">http</a> <a href="javascript:void(0);">https</a> <a href="javascript:void(0);">Access</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="Wie konvertiere ich Millisekunden in jQuery/JavaScript in ein lesbares Datum?" href="http://m.php.cn/de/faq/1796638584.html">Wie konvertiere ich Millisekunden in jQuery/JavaScript in ein lesbares Datum?</a></span><span>Nächster Artikel：<a class="dBlack" title="Wie konvertiere ich Millisekunden in jQuery/JavaScript in ein lesbares Datum?" href="http://m.php.cn/de/faq/1796638593.html">Wie konvertiere ich Millisekunden in jQuery/JavaScript in ein lesbares Datum?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-6t+ed+2i-1n-4w"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-5902227090019525"
data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});
</script><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><p>Heim</p></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><p>Kurs</p></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><p>Fragen und Antworten</p></a></li><li><a href="http://m.php.cn/de/login"><b class="icon5"></b><p>Mein</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="http://m.php.cn/de/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="http://m.php.cn/de/"><b class="icon1"></b><span>Heim</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course.html"><b class="icon2"></b><span>Kurs</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/article.html"><b class="icon3"></b><span>Artikel</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/wenda.html"><b class="icon4"></b><span>Fragen und Antworten</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/dic.html"><b class="icon6"></b><span>Wörterbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/course/type/99.html"><b class="icon7"></b><span>Handbuch</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/xiazai/"><b class="icon8"></b><span>Herunterladen</span><div class="clear"></div></a></li><li><a href="http://m.php.cn/de/faq/zt" title="Thema"><b class="icon12"></b><span>Thema</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="http://m.php.cn/de/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="http://m.php.cn/de/" >Heim</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/article.html" class="hover">Artikel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/wenda.html" >Fragen und Antworten</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/course.html" >Kurs</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/faq/zt" >Thema</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/xiazai" >Herunterladen</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/game" >Spiel</a></div><div class="swiper-slide"><a href="http://m.php.cn/de/dic.html" >Wörterbuch</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:setlang('en');" class="language course-right-orders chooselan " href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a><a onclick="javascript:setlang('ms');" class="language course-right-orders chooselan " href="javascript:;"><span>Melayu</span><span>（MS）</span></a><a onclick="javascript:setlang('fr');" class="language course-right-orders chooselan " href="javascript:;"><span>Français</span><span>（FR）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>Deutsch</span><span>（DE）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
