我们可以使用JavaScript来确定我们希望在应用程序中处理哪些url，以及我们希望将哪些url传递给默认浏览器。在我们的简单应用程序中，区别很简单。我们希望所有的链接都在默认浏览器中打开。这个应用程序中正在添加和删除链接，因此我们在linksSection元素上设置了一个事件监听器，并允许单击事件弹出。如果目标元素具有href属性，我们将阻止默认操作并将URL传递给默认浏览器。
列表2.36 在默认浏览器中打开链接: ./app/renderer.js
+|通过查找href属性
|检查被单击的元素是否为链接
linksSection.addEventListener('click', (event) => { |
if (event.target.href) { <---+
event.preventDefault(); <----+
shell.openExternal(event.target.href); <--+ |如果它不是一个连接，
} | |不打开
Uses Electron’s shell module | +
}); 在默认浏览器中使用Electorn |
打开链接 +
通过相对简单的更改，我们的代码的行为就像预期的那样。单击链接将在用户的默认浏览器中打开该页。我们有一个简单但功能齐全的桌面应用程序了。
我们完成的代码应该如下面的代码示例所示。你可能以不同的顺序使用您的功能。
列表2.37 完成的应用程序: ./app/renderer.js
const {shell} = require('electron');
const parser = new DOMParser();
const linksSection = document.querySelector('.links');
const errorMessage = document.querySelector('.error-message');
const newLinkForm = document.querySelector('.new-link-form');
const newLinkUrl = document.querySelector('.new-link-url');
const newLinkSubmit = document.querySelector('.new-link-submit');
const clearStorageButton = document.querySelector('.clear-storage');
newLinkUrl.addEventListener('keyup', () => {
newLinkSubmit.disabled = !newLinkUrl.validity.valid;
});
newLinkForm.addEventListener('submit', (event) => {
event.preventDefault();
const url = newLinkUrl.value;
fetch(url)
.then(response => response.text())
.then(parseResponse)
.then(findTitle)
.then(title => storeLink(title, url))
.then(clearForm)
.then(renderLinks)
.catch(error => handleError(error, url));
});
clearStorageButton.addEventListener('click', () => {
localStorage.clear();
linksSection.innerHTML = '';
});
linksSection.addEventListener('click', (event) => {
if (event.target.href) {
event.preventDefault();
shell.openExternal(event.target.href);
}
});
const clearForm = () => {
newLinkUrl.value = null;
}
const parseResponse = (text) => {
return parser.parseFromString(text, 'text/html');
}
const findTitle = (nodes) => {
return nodes.querySelector('title').innerText;
}
const storeLink = (title, url) => {
localStorage.setItem(url, JSON.stringify({ title: title, url: url }));
}
const getLinks = () => {
return Object.keys(localStorage)
.map(key => JSON.parse(localStorage.getItem(key)));
}
const convertToElement = (link) => {
return `<div><h3>${link.title}</h3>
<p><a href="http://www.likecs.com/${link.url}">${link.url}</a></p></div>`;
}
const renderLinks = () => {
const linkElements = getLinks().map(convertToElement).join('');
linksSection.innerHTML = linkElements;
}
const handleError = (error, url) => {
errorMessage.innerHTML = `
There was an issue adding "${url}": ${error.message}
`.trim();
setTimeout(() => errorMessage.innerText = null, 5000);
}
const validateResponse = (response) => {
if (response.ok) { return response; }
throw new Error(`Status code of ${response.status} ${response.statusText}`);
}
renderLinks();