Элемент <a>не перенаправляет на другую страницу и не является кликабельным - PullRequest
Новая
       19

Элемент <a>не перенаправляет на другую страницу и не является кликабельным

2 голосов
/ 05 августа 2020

Я создал веб-компонент, в котором объявил метод, создающий строку авторских прав: 

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

Затем я конвертирую эту строку в HTMLParagraphElement и добавляю к элементу footer. Когда я открываю веб-браузер, я не вижу ошибок и вижу свой элемент авторских прав. Если я проверю этот элемент, он также выглядит правильно, но если я нажму <a> часть этого элемента, ничего не произойдет (но он должен перенаправить на https://www.google.com).

Компонент AppFooter: 

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

Элемент на сайте:

enter image description here

Inspected element:

image 

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>

Если вам еще что-нибудь понадобится, дайте мне знать в комментариях

1 Ответ

4 голосов
/ 05 августа 2020 
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>
...