Проблему можно увидеть здесь
Я создал сайт, используя Sanity headless CMS и GatsbyJS на интерфейсе.
Я динамически запрашиваю URL-адреса, чтобы их можно было отобразить внутри атрибута src
</iframe>
. Проблема заключается в том, что пользователь добавляет URL-адрес, содержащий &
, что довольно часто встречается в коде встраивания Календаря Google.
С &
ссылка перестает работать и календарь ломается (гаснет). Если только я не запрограммирую его прямо в src
, чего мы и хотим избежать.
Как я могу смягчить/устранить эту проблему и иметь ее, чтобы я мог соответствующим образом отображать URL-адрес?
Я изучил encodeURI
, encodeURIComponent
, даже попробовал эту пользовательскую функцию:
function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
}
Нет игральных костей...
Моя текущая реализация
// sanity schema
export default {
type: 'document',
title: 'Google Calendar',
name: 'calendar',
fields: [
{
type: 'string',
name: 'Title',
},
{
type: 'url',
name: 'URL',
validation: (Rule) => Rule.required(),
},
],
};
//gastby
export default function GoogleCalendar() {
const { calendar } = useStaticQuery(graphql`
query {
calendar: allSanityCalendar {
nodes {
URL
Title
}
}
}
`);
if (!calendar.nodes.length) return null;
return (
<>
<div>
{calendar.nodes.map((node) => (
<iframe
src = {node.URL}
id = "test"
title = {node.Title}
width = "100%"
height = "1000px"
async
/>
))}
</div>
</>
);
}
Вот песочница, иллюстрирующая проблему: https://stackblitz.com/edit/iframe-dynamic-src
🤔 А знаете ли вы, что...
Синтаксис JavaScript схож с синтаксисом языка программирования Java, но они не связаны.
Вот вам и рабочая песочница: https://iframe-dynamic-src-pmxqbb.stackblitz.io
Я исправил это:
<iframe
src = {decodeURIComponent(
encodeURIComponent(brokeUrl.replace(/&/g, "&"))
)}
width = "800"
height = "600"
frameborder = "0"
scrolling = "no"
content
/>
Декодирование закодированного URL-адреса, который глобально заменяет амперсанды (&
) на &
.