如何使用SvelteKit创建自定义Embed嵌入组件

需求背景 #

部分平台（如GitBook）支持插入嵌入URL（例如YouTube的https://www.youtube.com/embed/eGUEAvNpz48），这类URL会在页面上渲染成独立的交互组件。现在需要用SvelteKit实现类似的自定义嵌入组件，让它可以通过https://test/embed这类URL访问，并能在其他平台作为小部件嵌入展示。

实现步骤 #

1. 创建嵌入专用路由页面 #

在SvelteKit的src/routes目录下新建embed/+page.svelte文件，作为嵌入组件的载体页面。

• 移除默认布局（避免继承主站导航、页头等元素），在同目录下创建+page.js并添加：

export const layout = false;

• 配置页面元数据适配嵌入场景，在+page.svelte中添加：

<svelte:head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>自定义嵌入组件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            overflow: hidden;
        }
    </style>
</svelte:head>

2. 开发嵌入组件核心内容 #

在+page.svelte中编写自定义组件的交互与样式，示例如下：

<div class="embed-widget">
    <h3>今日访问量</h3>
    <p class="count">1,234</p>
    <button onclick={() => alert('点击了嵌入组件')}>查看详情</button>
</div>

<style>
    .embed-widget {
        width: 300px;
        padding: 20px;
        background: #f5f5f5;
        border-radius: 8px;
        text-align: center;
        font-family: sans-serif;
    }
    .count {
        font-size: 2rem;
        font-weight: bold;
        margin: 10px 0;
        color: #2c3e50;
    }
    button {
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        background: #3498db;
        color: white;
        cursor: pointer;
    }
</style>

3. 配置跨域访问（关键） #

因为嵌入组件会被其他域名页面调用，需在SvelteKit中配置CORS。在src/hooks.server.js添加：

export async function handle({ event, resolve }) {
    const response = await resolve(event);
    // 可指定特定域名，如'https://your-gitbook-domain.com'，*代表允许所有域名
    response.headers.set('Access-Control-Allow-Origin', '*');
    response.headers.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    response.headers.set('Access-Control-Allow-Headers', 'Content-Type');
    return response;
}

4. 测试嵌入效果 #

在目标平台中，通过iframe嵌入组件URL：

<iframe src="https://your-sveltekit-site.com/embed" width="300" height="200" frameborder="0" scrolling="no"></iframe>

部分支持直接输入嵌入URL的平台，直接填入组件地址即可。

5. 进阶优化（可选） #

• 动态参数传递：通过URL查询参数传递数据，比如https://your-sveltekit-site.com/embed?data=123，在+page.svelte中用$page.url.searchParams.get('data')获取并动态渲染。
• 响应式适配：监听窗口尺寸变化，让组件自动适配iframe大小。
• 样式隔离：利用Svelte的样式隔离特性，避免组件样式影响宿主页面。

内容的提问来源于stack exchange，提问作者Jacob Tucker