我创建了一个 Web 组件，在其中声明了创建版权字符串的方法：
'<p>Copyright © 2020 Krzysztof Kaczyński<a href="https://www.google.com">. Policy terms</a></p>'
然后我把这个字符串转换成HTMLParagraphElement并附加到footer元素。
当我打开网络浏览器时，我没有看到任何错误，并且可以看到我的版权元素。
如果我检查这个元素，它看起来也正确，但如果我单击<a>该元素的一部分没有任何反应（但它应该重定向到https://www.google.com).
- 为什么这个
<a href="https://www.google.com">. Policy terms</a>不重定向到https://www.google.com https://www.google.com点击后？
- 我怎样才能解决这个问题 ？
应用程序页脚组件：
export class AppFooter extends KKWebComponent implements KKAppFooter {
public static TAG: string = `${CONSTANTS.TAG_PREFIX}-app-footer`;
public readonly shadowRoot!: ShadowRoot;
private footer!: HTMLElement;
constructor() {
super(template);
this.getElementsReferences();
}
protected getElementsReferences(): void {
this.footer = <HTMLElement>this.shadowRoot.querySelector('footer');
}
public setCopyright({ year, author, termsReferenceUrl }: CopyrightProps): void {
const copyrightText: string = AppFooter.formattedCopyrights`Copyright © ${year} ${author}. Policy terms${termsReferenceUrl}`;
this.footer.appendChild(new StringElementConverter().toElement(copyrightText));
}
private static formattedCopyrights(strings: TemplateStringsArray, ...values: string[]): string {
const policyTermsUrlText: string = `<a href="${values[values.length - 1]}">${strings[strings.length - 2]}</a>`;
let formattedText: string = '<p>';
for (let i = 0; i < values.length - 1; i++) {
formattedText += `${strings[i]}${values[i]}`;
}
formattedText += `${policyTermsUrlText}</p>`;
return formattedText;
}
}
网站上的元素：
检查的元素：
代码片段
class StringElementConverter {
constructor() {
this.domParser = new DOMParser();
}
toElement(xmlString) {
const parsedString = this.domParser.parseFromString(xmlString, 'text/xml').firstElementChild;
if (parsedString == null) {
throw new Error(`This xml string ${xmlString} is not parsable to Node`);
}
return parsedString;
}
}
const template = `
<footer>
<slot name="prepend"></slot>
<slot name="center"></slot>
<slot name="append"></slot>
</footer>
`;
class AppFooter extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = template;
this.getElementsReferences();
this.setCopyright({
year: '2020',
author: 'Krzysztof Kaczyński',
termsReferenceUrl: 'https://www.google.com',
});
}
getElementsReferences() {
this.footer = this.shadowRoot.querySelector('footer');
}
setCopyright({ year, author, termsReferenceUrl }) {
const copyrightText = this.formattedCopyrights`Copyright © ${year} ${author}. Policy terms${termsReferenceUrl}`;
this.footer.appendChild(new StringElementConverter().toElement(copyrightText));
}
formattedCopyrights(strings, ...values) {
const policyTermsUrlText = `<a href="${values[values.length - 1]}">${strings[strings.length - 2]}</a>`;
let formattedText = '<p>';
for (let i = 0; i < values.length - 1; i++) {
formattedText += `${strings[i]}${values[i]}`;
}
formattedText += `${policyTermsUrlText}</p>`;
return formattedText;
}
}
customElements.define('kk-app-footer', AppFooter);
<kk-app-footer></kk-app-footer>
如果您还需要任何其他信息，请在评论中告诉我
this.domParser.parseFromString(xmlString, 'text/xml')
您没有将内容解析为正确的内容类型。你要：
this.domParser.parseFromString(xmlString, 'text/html')
我猜当您将内容解析为 XML 而不是 HTML 时，浏览器不会认为<a>有什么特殊意义。
工作示例：
class StringElementConverter {
constructor() {
this.domParser = new DOMParser();
}
toElement(xmlString) {
const parsedString = this.domParser.parseFromString(xmlString, 'text/html').firstElementChild;
if (parsedString == null) {
throw new Error(`This xml string ${xmlString} is not parsable to Node`);
}
return parsedString;
}
}
const template = `
<footer>
<slot name="prepend"></slot>
<slot name="center"></slot>
<slot name="append"></slot>
</footer>
`;
class AppFooter extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = template;
this.getElementsReferences();
this.setCopyright({
year: '2020',
author: 'Krzysztof Kaczyński',
termsReferenceUrl: 'https://www.google.com',
});
}
getElementsReferences() {
this.footer = this.shadowRoot.querySelector('footer');
}
setCopyright({ year, author, termsReferenceUrl }) {
const copyrightText = this.formattedCopyrights`Copyright © ${year} ${author}. Policy terms${termsReferenceUrl}`;
this.footer.appendChild(new StringElementConverter().toElement(copyrightText));
}
formattedCopyrights(strings, ...values) {
const policyTermsUrlText = `<a href="${values[values.length - 1]}">${strings[strings.length - 2]}</a>`;
let formattedText = '<p>';
for (let i = 0; i < values.length - 1; i++) {
formattedText += `${strings[i]}${values[i]}`;
}
formattedText += `${policyTermsUrlText}</p>`;
return formattedText;
}
}
customElements.define('kk-app-footer', AppFooter);
<kk-app-footer></kk-app-footer>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
