Flutter Web：SPA：在元数据标签中使用 URL 参数
Posted
技术标签:
【中文标题】Flutter Web：SPA：在元数据标签中使用 URL 参数【英文标题】：Flutter Web: SPA: using URL parameters in meta data tags 【发布时间】：2020-11-30 11:22:32 【问题描述】：我想获取 URL 中的参数并使用它们在我的 SPA 中生成 og:image 元标记。具体目的是为给定的 url 提供动态缩略图。这个想法是让爬虫能够找到合适的缩略图。
示例网址：
https://my.app/#/post?uid=abc&pid=123
这两个参数不一定总是包含在内。我希望它不会引起问题。 我的理解是爬虫通常只检查 html 中的元数据。如何在元数据之前在我的 html 中包含一些代码？ （我对 HTML 比较陌生）
我可以将脚本放在 head 标签中吗？脚本中的变量在脚本之外是否可用？我可以在我的 og:image 标签的 URL 地址中使用变量吗？
<!DOCTYPE html>
<html>
<head>
<meta property="og:image" content="https://my.app/uid/pid/thumb.png" />
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="Get Dressed. Better than you ever had">
<!-- ios meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="vestiqweb">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>VESTIQ</title>
<link rel="manifest" href="manifest.json">
</head>
<body id="app-container">
<script>
if ('serviceWorker' in navigator)
window.addEventListener('load', function ()
navigator.serviceWorker.register('flutter_service_worker.js');
);
</script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-analytics.js"></script>
<script>
var firebaseConfig =
//config info
;
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js?version=14" type="application/javascript"></script>
</body>
</html>
【问题讨论】：
【参考方案1】：我能够在元标记之前放置一个脚本并使用 window.location.href 来获取 URL。我使用 URLSearchParams 来提取参数。但是，我只能得到第二个参数而不是第一个。如果我在 uid 之前添加一个“&”，它会起作用，但会使 url 看起来很奇怪......“？&uid”
<script>
const queryString = window.location.href;
const urlParams = new URLSearchParams(queryString);
const uid = urlParams.get('uid')
const pid = urlParams.get('pid')
if (uid != null && pid != null)
document.getElementById('urlThumb').content = `https://my.app/posts%2F$uid%2F$pid%2Furl_thumb.jpg?alt=media`;
</script>
【讨论】：
能否详细说明它是否有效以及如何运作？ 我回复了你对这个问题的评论：***.com/questions/63364474/… 那里列出的方法效果很好。希望有帮助以上是关于Flutter Web：SPA：在元数据标签中使用 URL 参数的主要内容，如果未能解决你的问题，请参考以下文章
郑州-第七十四期前后端分离（SPA）与不分离（JSP） 工作流程分别是怎样的?