嗨，
我正在尝试构建一个前端发布Web应用程序，您可以在其中将URL直接从前端推送到数据库中。
数据库的内容被调用到Web应用程序中，并像在Facebook上的新闻流一样显示。为了从网址中提取内容（图像，描述等），我正在使用API。
到目前为止，一切正常，需要Linkpreview功能。 我尝试了几种方法来实现此目的，但是每次页面加载时，仅提取一个linkpreview / url。只要所有URL都被提取，“解决方法”就是刷新。这意味着5个帖子，大约5次刷新。
我将避免这种行为，并希望在用户访问后提取所有网址。
您对此问题有何看法？ 这是一种缓存吗？
这是JS代码，用于从数据库中调用内容，创建新的div并插入内容。 »guteUrls.execute（）;«是用来获取插入的网址并执行链接预览的方法：
let invRef = database.ref('innovation');
let desRef = database.ref('design');
let tecRef = database.ref('tech');
let worRef = database.ref('work');
let ref = [invRef, desRef, tecRef, worRef];
for(let j = 0; j < ref.length; j++)
ref[j].on("child_added", function(snapshot, prevChildKey) {
let newPost = snapshot.val();
let card = document.createElement('div');
card.setAttribute('class', 'linkprev');
$('#content').prepend($(card));
card.append(newPost.link);
guteUrls.execute();
这是HTML（我想此问题不是必需的，但可以使其更加透明）：
<!DOCTYPE html>
<html manifest="cache.appcache" lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>the daily repost – a front end publishing platform</title>
<!--Webapp manifest-->
<link rel="manifest" href="webapp/manifest.json">
<script src="https://cdn.rawgit.com/GoogleChrome/pwacompat/v1.0.3/pwacompat.min.js"></script>
<!--Caching manifest-->
<script>
window.applicationCache.update(); // try to refresh the cache
window.applicationCache.status // refreshed?
window.applicationCache.swapCache // set new cache
</script>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- firebase -->
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase-auth.js"></script>
<script>
var config = {
apiKey: "…",
authDomain: "…",
databaseURL: "…",
projectId: "…",
storageBucket: "…",
messagingSenderId: "…"
};
firebase.initializeApp(config);
var database = firebase.database();
</script>
<!-- Linkpreview API -->
<script
src="https://guteurls.de/guteurls.js"
selector='.linkprev'
gif="http://loading.io/assets/img/default-loader.gif"
callback-a="(function(jqueryElement,url,$){console.log('url:'+url)})"
callback="(function($){$('#loader-wrapper').fadeOut()})"
init="(function($){console.log('JS will start to search URLs now')})">
</script>
<!--material-design lib-->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<!--AOSlib-->
<link href="css/aos.css" rel="stylesheet">
<script src="js/aos.js"></script>
<!--Tagfunctionality-->
<script src="js/jquery.tagsinput.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.tagsinput.css" />
<!--Document stylesheet-->
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<!--Loadinganimation on entering-->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!--AddToHomeScreen for IOS-->
<script src="js/addtohomescreen.js"></script>
<script src="js/addtohomescreen.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/addtohomescreen.css">
<script>
addToHomescreen();
</script>
</head>
<body>
<!--Authentification formular-->
<div id="authfield">
<div class="authcontent">
<h5>Hey, welcome to daily repost</h5>
<div class="msg">Please log-in or create an account</div>
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="txtEmail" placeholder="e-mail">
</div>
</form>
<form action="#">
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="password" id="txtPassword" placeholder="password">
</div>
</form>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="btnlogin">
Log-in </button>
<button id="btnsignup" class="txtbutton">Create a new account with this credentials</button>
</div><!--/authcontent-->
</div><!--/authfield-->
<!--LogOutbutton-->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" id="btnlogout">Log-out</button>
<!--Addbutton for new posts-->
<button id="show" class="show mdl-button mdl-js-button mdl-button--fab" onclick="funcShow(this); + funcHide(this);">
<i class="material-icons">add</i>
</button>
<!--/Inputfield for new posts-->
<div id="Overlay" name="Overlay" class="overlay">
<div id="inputwrapper">
<div id="close" class="close" onclick="funcClose(this);">X</div>
<!-- Textfield with Floating Label Materialdesign-->
<form action="#" method="post" name="contactForm" id="form" autocomplete="off">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" id="url" type="url" required name="url" class="input" value="">
<label class="mdl-textfield__label" for="sample3">Share a great post...</label>
</div><!--/mdl-textfield…-->
<!-- Input for Tags-->
<input name="tags" id="tags" value=""/>
</form>
<!--Buttons for pushing into DB-areas-->
<div class="category">
<button id="button" class="f f1" >innovation</button>
<button id="button" class="f f2" >design</button>
<button id="button" class="f f3" >tech</button>
<button id="button" class="f f4" >work</button>
</div><!--/category-->
</div><!--/inputwrapper-->
</div><!--/Overlay-->
<!--<button id="btntest" onclick = "displayLoginBox()">check</button>-->
<!--Contentarea, where JS will put the content from the DB-->
<div id="content" class="listcontent inactiveLink"></div>
<!-- Scripts -->
<script src="js/script.js"></script>
<script src="js/signupform.js"></script>
<script>$('#tags').tagsInput();</script>
</body>
<!--Service-worker script-->
<script>
/*if ('serviceWorker' in navigator) {
console.log("Will the service worker register?");
navigator.serviceWorker.register('service-worker.js')
.then(function(reg){
console.log("Yes, it did.");
}).catch(function(err) {
console.log("No it didn't. This happened: ", err)
});
}*/
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('./service-worker.js')
.then(function() { console.log('Service Worker Registered'); });
}
let cacheName = 'weatherPWA-step-6-1';
let filesToCache = [];
self.addEventListener('install', function(e) {
console.log('[ServiceWorker] Install');
e.waitUntil(
caches.open(cacheName).then(function(cache) {
console.log('[ServiceWorker] Caching app shell');
return cache.addAll(filesToCache);
}));
});
self.addEventListener('activate', function(e) {
console.log('[ServiceWorker] Activate');
e.waitUntil(
caches.keys().then(function(keyList) {
return Promise.all(keyList.map(function(key) {
if (key !== cacheName) {
console.log('[ServiceWorker] Removing old cache', key);
return caches.delete(key);
}
}));
})
);
return self.clients.claim();
});
let filesToCache = [
'/',
'/index.html',
'css/style.css',
'css/aos.css'
];
</script>
</html>
console.log("Link: " + newPost.link);
console.log("Tag: " + newPost.tags);
console.log("Previous Post ID: " + prevChildKey);
});
谢谢 本