如何使用LinkPreview API制作预览框?
How to make a preview box using LinkPreview API?
如下图 link 预览所示,这是我期望用户在文本区域中插入 link 时以相同方式显示的图像。
从 link 预览站点,我在控制台 window 中获取站点的 image
、url
、description
,但我想在其中显示一个 <div>
标签。
html:
<div class="show_lnk"></div>
<textarea class="form-control" placeholder="" id="url" name="user_status"></textarea>
jquery:
jQuery("textarea[name*='user_status']").blur(function () {
var target = jQuery(this).val();
$.ajax({
url: "https://api.linkpreview.net",
dataType: 'jsonp',
data: {q: target, key: '5a2e292e7d25bb63a2d3b4c63524cd10abe39420dc68c'},
success: function (response) {
var data=response;
$(".show_lnk").html('<img src="'+data.image+'" style="width:30px;height:30px;" ');
console.log(data.image);
}
});
});
我不完全确定你被困在哪里,但这会在专用 <div>
内的一些简单标签中显示响应数据。如何操作 css 完全取决于您。
我已经将 google.com
预加载到文本区域中,因此您唯一需要做的就是通过引发 blur
事件(制表符或其他)来触发该功能。
$(document).ready(function() {
$("textarea[name*='user_status']").blur(function () {
var target = $(this).val();
$.ajax({
url: "https://api.linkpreview.net",
dataType: 'jsonp',
data: {q: target, key: '5a2e292e7d25bb63a2d3b4c63524cd10abe39420dc68c'},
success: function (response) {
$("#show_lnk").html('<img src="'+response.image+'"><h3>'+response.title+'</h3><h4>'+response.description+'</h4><a href="'+response.url+'">'+response.url+'</a>');
}
});
});
});
body {
padding: 25px;
}
#show_lnk img {
width:30px;
height:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="form-control" placeholder="" id="url" name="user_status">google.com</textarea>
<div id="show_lnk"></div>
如下图 link 预览所示,这是我期望用户在文本区域中插入 link 时以相同方式显示的图像。
从 link 预览站点,我在控制台 window 中获取站点的 image
、url
、description
,但我想在其中显示一个 <div>
标签。
html:
<div class="show_lnk"></div>
<textarea class="form-control" placeholder="" id="url" name="user_status"></textarea>
jquery:
jQuery("textarea[name*='user_status']").blur(function () {
var target = jQuery(this).val();
$.ajax({
url: "https://api.linkpreview.net",
dataType: 'jsonp',
data: {q: target, key: '5a2e292e7d25bb63a2d3b4c63524cd10abe39420dc68c'},
success: function (response) {
var data=response;
$(".show_lnk").html('<img src="'+data.image+'" style="width:30px;height:30px;" ');
console.log(data.image);
}
});
});
我不完全确定你被困在哪里,但这会在专用 <div>
内的一些简单标签中显示响应数据。如何操作 css 完全取决于您。
我已经将 google.com
预加载到文本区域中,因此您唯一需要做的就是通过引发 blur
事件(制表符或其他)来触发该功能。
$(document).ready(function() {
$("textarea[name*='user_status']").blur(function () {
var target = $(this).val();
$.ajax({
url: "https://api.linkpreview.net",
dataType: 'jsonp',
data: {q: target, key: '5a2e292e7d25bb63a2d3b4c63524cd10abe39420dc68c'},
success: function (response) {
$("#show_lnk").html('<img src="'+response.image+'"><h3>'+response.title+'</h3><h4>'+response.description+'</h4><a href="'+response.url+'">'+response.url+'</a>');
}
});
});
});
body {
padding: 25px;
}
#show_lnk img {
width:30px;
height:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="form-control" placeholder="" id="url" name="user_status">google.com</textarea>
<div id="show_lnk"></div>