- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想将添加到表单的任何值转换为与标题链接(超链接)
例如:
结果(超链接):Udemy:在线类(class) - 按您的日程安排学习任何内容
这是我的代码
HTML
<div class="container">
<form action="" class="addform">
<div class="input-group mb-3">
<input type="url" class="form-control" id="item" aria-describedby="emailHelp" placeholder="Enter link"> <div class="input-group-append">
<button class="btn btn-primary" id="addItem" type="button">Submit</button>
</div>
</div>
</form>
</div>
JS
document.getElementById('addItem').addEventListener('click', function() {
var value = document.getElementById('item').value;
if (value) addItemToList(value);
});
function addItemToList(text) {
var list = document.getElementById('linkss')
var item = document.createElement('li');
item.innerHTML = text;
var buttons = document.createElement('linkss');
buttons.classList.add('buttons')
var remove = document.createElement('button');
remove.classList.add('remove');
// remove.innerHTML = removeIcon;
var add = document.createElement('button');
add.classList.add('add');
// buttons.appendChild(remove);
item.appendChild(buttons);
list.appendChild(item);
}
最佳答案
为了做到这一点,您必须加载该页面并获取其 <title>
元素。
您可以尝试以两种不同的方式做到这一点:
使用 AJAX GET 请求获取页面内容,在这种情况下您将收到 CORS 错误:
Failed to load https://www.udemy.com/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://stackoverflow.com' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
fetch('https://www.udemy.com');
使用 <iframe>
,在这种情况下您将得到 X-Frame-Options
错误:
Refused to display 'https://www.udemy.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
<iframe src="https://udemy.com" />
正确的方法是使用代理/API,它会为您发出相同的 GET 请求,获取页面标题并将其发回。例如:
Textance :一个简单的 API,仅检索页面标题。这只是一个示例,因为您还会得到 Access-Control-Allow-Origin
如果您尝试在页面上使用它,则会出错。
例如,https://textance.herokuapp.com/rest/title/http%3A%2F%2Fudemy.com返回文本:
Online Courses - Learn Anything, On Your Schedule | Udemy
URL Meta :另一个返回附加元数据的 API,并且公开可用,因此您可以直接从应用程序使用此 API,但速度有点慢,有时可能会出现故障。
例如,https://url-meta.herokuapp.com/?url=http%3A%2F%2Fwww.udemy.com返回以下 JSON 响应:
{
"result": {
"status": "OK"
},
"meta": {
"url": "http://udemy.com",
"type": "text/html",
"title": "Online Courses - Learn Anything, On Your Schedule | Udemy",
"image": "https://www.udemy.com/staticx/udemy/images/v6/logo-coral.svg",
"description": "Udemy is an online learning and teaching marketplace with over 65,000 courses and 15 million students. Learn programming, marketing, data science and more.",
"favicon": "https://www.udemy.com/staticx/udemy/images/v6/favicon-128.png",
"feed": {
"link": "http://udemy.com/"
}
}
}
要使用它,只需使用您想要从中获取标题的 URL 发出 GET 请求即可。例如,使用 Fetch API ,IE 不支持:
const input = document.getElementById('input');
const list = document.getElementById('list');
document.getElementById('add').onclick = () => {
let url = input.value;
if (!url) return;
if (url.indexOf('http') !== 0) {
// Make sure the url we send always starts with http or https:
url = `http://${ url }`;
}
// Clear input field:
input.value = '';
const li = document.createElement('li');
// Create a new entry in the list indicating we are still loading the title:
li.innerText = `Loading title for ${ url }...`;
list.appendChild(li);
// Request the actual title of that URL from the URL Meta API:
fetch(`https://url-meta.herokuapp.com/?url=${ encodeURIComponent(url) }`)
.then(res => res.json())
.then(data => {
// Once we get a response back, update the text/HTML inside the <li> we have just added
// with the right text and <a> or an error message:
if (data.result.status === 'ERROR') {
li.innerText = `There was an error loading ${ url }: ${ data.result.reason }`;
} else {
li.innerHTML = `<a href="${ url }">${ data.meta.title }</a>`;
}
}).catch(() => {
li.innerText = `There was an error loading ${ url }.`;
});
};
body {
margin: 0;
font-family: monospace;
line-height: 15px;
}
#menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
border-bottom: 3px solid #000;
height: 33px;
}
#input,
#add {
border: 0;
outline: none;
padding: 4px 8px;
box-sizing: border-box;
background: #FFF;
font-family: monospace;
text-align: left;
}
#input {
width: 70%;
border-right: 3px solid #000;
}
#add {
width: 30%;
}
#input:hover,
#add:hover {
background: #EEE;
}
#list {
list-style: none;
margin: 0;
padding: 35px 0 0;
}
#list > li {
border-bottom: 1px solid #000;
padding: 10px;
}
#list > li > a {
word-break: break-word;
word-break: break-all;
}
<header id="menu">
<input id="input" type="text" placeholder="URL" value="http://www.udemy.com" />
<button id="add">ADD LINK</button>
</header>
<ul id="list"></ul>
或者,您可以实现自己的代理/API。这将是一个很好的起点:Getting the page title from a scraped webpage
关于javascript - JS :How to turn any value to be a hyperlink via HTML form,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50976284/
我是一名优秀的程序员,十分优秀!