< a>元素不会重定向到另一个页面，并且不可点击 [英] <a> element doesn't redirect to another page and is not clickable

问题描述

我创建了一个Web组件，在其中声明了创建版权字符串的方法:

 '< p>版权所有©2020 KrzysztofKaczyński< a href =" https://www.google.com>.政策条款</a>/p>' 

然后，我将该字符串转换为 HTMLParagraphElement 并追加到 footer 元素.打开网络浏览器时，看不到任何错误，并且可以看到我的版权元素.如果我检查此元素，它看起来也正确，但是如果我单击此元素的< a> 部分，则什么都不会发生(但应重定向到 https://www.google.com ).

• 为什么使用此< a href =" https://www.google.com">.政策条款</a> 不会重定向到

  已检查的元素:

  代码段

    class StringElementConverter {Constructor(){this.domParser = new DOMParser();}toElement(xmlString){const parsedString = this.domParser.parseFromString(xmlString，'text/xml').firstElementChild;如果(parsedString == null){抛出新错误(`此XML字符串$ {xmlString}无法解析到Node`)；}返回parsedString;}}const template =`< footer>< slot name ="prepend"></slot>< slot name ="center"></slot>< slot name ="append"></slot></footer>`;AppFooter类扩展了HTMLElement {Constructor(){极好的();this.attachShadow({mode:'open'});this.shadowRoot.innerHTML =模板;this.getElementsReferences();this.setCopyright({年:'2020'，作者:"KrzysztofKaczyński"，termsReferenceUrl:"https://www.google.com"，});}getElementsReferences(){this.footer = this.shadowRoot.querySelector('footer');}setCopyright({年，作者，termsReferenceUrl}){const copyrightText = this.formattedCopyrights`Copyright©$ {year} $ {author}.政策条款$ {termsReferenceUrl}`；this.footer.appendChild(new StringElementConverter().toElement(copyrightText));}formattedCopyrights(strings，... values){const policyTermsUrlText =`< a href ="$ {values [values.length-1]}"> $ {strings [strings.length-2]}</a>`;让formattedText ='< p>';;for(让i = 0; i  

   < 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;如果(parsedString == null){抛出新错误(`此XML字符串$ {xmlString}无法解析到Node`)；}返回parsedString;}}const template =`< footer>< slot name ="prepend"></slot>< slot name ="center"></slot>< slot name ="append"></slot></footer>`;AppFooter类扩展了HTMLElement {Constructor(){极好的();this.attachShadow({mode:'open'});this.shadowRoot.innerHTML =模板;this.getElementsReferences();this.setCopyright({年:'2020'，作者:"KrzysztofKaczyński"，termsReferenceUrl:"https://www.google.com"，});}getElementsReferences(){this.footer = this.shadowRoot.querySelector('footer');}setCopyright({年，作者，termsReferenceUrl}){const copyrightText = this.formattedCopyrights`Copyright©$ {year} $ {author}.政策条款$ {termsReferenceUrl}`；this.footer.appendChild(new StringElementConverter().toElement(copyrightText));}formattedCopyrights(strings，... values){const policyTermsUrlText =`< a href ="$ {values [values.length-1]}"> $ {strings [strings.length-2]}</a>`;让formattedText ='< p>';;for(让i = 0; i  

   < kk-app-footer></kk-app-footer>  

  I created a web-component in which I declared method which creates a copyright string:

  '<p>Copyright © 2020 Krzysztof Kaczyński<a href="https://www.google.com">. Policy terms</a></p>'
  

  Then I am converting this string into HTMLParagraphElement and append to footer element. When I open web browser I do not see any errors and I can see my copyright element. If I inspect this element it also looks correct but if I click <a> part of this element nothing happens (but it should redirect to https://www.google.com).

  • Why this <a href="https://www.google.com">. Policy terms</a> doesn't redirect to https://www.google.com after click ?
  • How can I fix this ?

  AppFooter component:

  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;
      }
  }
  

  Element on website:

  Inspected element:

  Code snippet

  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>

  If you need anything else let me know in comments

  解决方案

  this.domParser.parseFromString(xmlString, 'text/xml')
  

  You're not parsing your content as the right content type. You want:

  this.domParser.parseFromString(xmlString, 'text/html')
  

  I'm guessing that when you parse the content as XML instead of HTML, the browser doesn't think that <a> has any special meaning.

  ---

  Working example:

  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>

  这篇关于< a>元素不会重定向到另一个页面，并且不可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！