Avis de traduction IA
Cette documentation a été traduite automatiquement par IA.
Bloc Iframe
This feature is provided by the plugin «Bloc : iframe»
Introduction
Le bloc Iframe vous permet d'intégrer des pages web ou du contenu externe dans la page actuelle. Vous pouvez intégrer facilement des applications externes en configurant une URL ou en insérant directement du code HTML. Avec le HTML, vous pouvez personnaliser le contenu de manière flexible pour répondre à des besoins d'affichage spécifiques, ce qui est idéal pour les scénarios personnalisés. Cette approche permet de charger des ressources externes sans redirection, améliorant ainsi l'expérience utilisateur et l'interactivité de la page.
Installation
C'est un plugin intégré, aucune installation n'est requise.
Ajouter des blocs
Configurez l'URL ou le HTML pour intégrer directement l'application externe.
Moteur de template
Template de chaîne
Le moteur de template par défaut.
Handlebars
Pour plus d'informations, consultez la documentation du moteur de template Handlebars.
Passer des variables
Prise en charge de l'analyse des variables en HTML
Prise en charge de la sélection de variables à partir du sélecteur de variables dans le contexte du bloc actuel
Prise en charge de l'injection et de l'utilisation de variables dans l'application via du code
Vous pouvez également injecter des variables personnalisées dans l'application via du code et les utiliser en HTML. Par exemple, pour créer une application de calendrier dynamique avec Vue 3 et Element Plus :
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue3 CDN Example</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.5.9/vue.global.prod.js"></script>
<script src="https://unpkg.com/element-plus"></script>
<script src="https://unpkg.com/element-plus/dist/locale/zh-cn"></script>
<link
rel="stylesheet"
href="https://unpkg.com/element-plus/dist/index.css"
/>
</head>
<body>
<div id="app">
<el-container>
<el-main>
<el-calendar v-model="month">
<div class="header-container">
<div class="action-group">
<span class="month-display">{{ month }}</span>
<el-button-group>
<el-button
type="primary"
:loading="loading"
@click="changeMonth(-1)"
>Last month</el-button
>
<el-button
type="primary"
:loading="loading"
@click="changeMonth(1)"
>Next month</el-button
>
</el-button-group>
</div>
</div>
</el-calendar>
</el-main>
</el-container>
</div>
<script>
const { createApp, ref, provide } = Vue;
const app = createApp({
setup() {
const month = ref(new Date().toISOString().slice(0, 7));
const loading = ref(false);
const changeMonth = (offset) => {
const date = new Date(month.value + '-01');
date.setMonth(date.getMonth() + offset);
month.value = date.toISOString().slice(0, 7);
};
provide('month', month);
provide('changeMonth', changeMonth);
return { month, loading, changeMonth };
},
});
app.use(ElementPlus);
app.mount('#app');
</script>
</body>
</html>
Exemple : Un composant de calendrier simple créé avec React et Ant Design (antd), utilisant dayjs pour gérer les dates
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React CDN Example</title>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/antd/dist/antd.min.css"
/>
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/antd/dist/antd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const { useState } = React;
const { Calendar, Button, Space, Typography } = window.antd;
const { Title } = Typography;
const CalendarComponent = () => {
const [month, setMonth] = useState(dayjs().format('YYYY-MM'));
const [loading, setLoading] = useState(false);
const changeMonth = (offset) => {
const newMonth = dayjs(month)
.add(offset, 'month')
.format('YYYY-MM');
setMonth(newMonth);
};
return React.createElement(
'div',
{ style: { padding: 20 } },
React.createElement(
'div',
{
style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: 16,
},
},
React.createElement(Title, { level: 4 }, month),
React.createElement(
Space,
null,
React.createElement(
Button,
{ type: 'primary', loading, onClick: () => changeMonth(-1) },
'Last month',
),
React.createElement(
Button,
{ type: 'primary', loading, onClick: () => changeMonth(1) },
'Next month',
),
),
),
React.createElement(Calendar, {
fullscreen: false,
value: dayjs(month),
}),
);
};
ReactDOM.createRoot(document.getElementById('app')).render(
React.createElement(CalendarComponent),
);
});
</script>
</body>
</html>
L'URL prend en charge les variables
Pour plus d'informations sur les variables, consultez la documentation sur les variables.
Créer des Iframes avec des blocs JS (NocoBase 2.0)
Dans NocoBase 2.0, vous pouvez utiliser des blocs JS pour créer dynamiquement des iframes avec plus de contrôle. Cette approche offre une meilleure flexibilité pour personnaliser le comportement et le style des iframes.
Exemple de base
Créez un bloc JS et utilisez le code suivant pour créer une iframe :
// Crée une iframe qui remplit le conteneur du bloc actuel
const iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 'none';
// Remplace les éléments enfants existants pour que l'iframe soit le seul contenu
ctx.element.replaceChildren(iframe);
Points clés
- ctx.element : L'élément DOM du conteneur du bloc JS actuel.
- attribut sandbox : Contrôle les restrictions de sécurité pour le contenu de l'iframe.
allow-scripts : Permet à l'iframe d'exécuter des scripts.allow-same-origin : Permet à l'iframe d'accéder à sa propre origine.
- replaceChildren() : Remplace tous les enfants du conteneur par l'iframe.
Exemple avancé avec état de chargement
Vous pouvez améliorer la création d'iframes avec des états de chargement et la gestion des erreurs :
// Affiche un message de chargement
ctx.message.loading('正在加载外部内容...');
try {
// Crée l'iframe
const iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 'none';
// Ajoute un écouteur d'événement de chargement
iframe.addEventListener('load', () => {
ctx.message.success('内容加载成功');
});
// Ajoute un écouteur d'événement d'erreur
iframe.addEventListener('error', () => {
ctx.message.error('加载内容失败');
});
// Insère l'iframe dans le conteneur
ctx.element.replaceChildren(iframe);
} catch (error) {
ctx.message.error('创建 iframe 出错: ' + error.message);
}
Considérations de sécurité
Lorsque vous utilisez des iframes, tenez compte des meilleures pratiques de sécurité suivantes :
- Utilisez HTTPS : Chargez toujours le contenu de l'iframe via HTTPS lorsque c'est possible.
- Restreignez les permissions Sandbox : N'activez que les permissions sandbox nécessaires.
- Politique de sécurité du contenu (CSP) : Configurez les en-têtes CSP appropriés.
- Politique de même origine : Soyez conscient des restrictions inter-origines.
- Sources fiables : Ne chargez du contenu qu'à partir de domaines fiables.
