使用 jquery 为 padlet 嵌入 iframe 进行样式设置

Posted 2023-05-09

【中文标题】使用 jquery 为 padlet 嵌入 iframe 进行样式设置

【英文标题】：styling a padlet embed iframe with jquery

【发布时间】：2020-08-08 07:43:00

【问题描述】：

在 Padlet 中隐藏/添加样式，使用 jQuery 嵌入 iframe，不会针对 div#surface-header.app-bar.surface-header

Padlet iframe 嵌入代码演示：

<iframe src="https://padlet.com/embed/s0ckmpcp5oauwa0z" frameborder="0" allow="camera;microphone;geolocation" style="width:100%;height:608px;display:block;padding:0;margin:0"> 
    </iframe>

Padlet 完整嵌入代码演示：

<div class="padlet-embed" style="border:1px solid rgba(0,0,0,0.1);border-radius:2px;box-sizing:border-box;overflow:hidden;position:relative;width:100%;background:#F4F4F4"><p style="padding:0;margin:0"><iframe src="https://padlet.com/embed/s0ckmpcp5oauwa0z" frameborder="0" allow="camera;microphone;geolocation" style="width:100%;height:608px;display:block;padding:0;margin:0"></iframe></p><div style="padding:8px;text-align:right;margin:0;"><a href="https://padlet.com?ref=embed" style="padding:0;margin:0;border:none;display:block;line-height:1;height:16px" target="_blank"><img src="https://resources.padletcdn.com/assets/made_with_padlet.png"   style="padding:0;margin:0;background:none;border:none;display:inline;box-shadow:none" ></a></div></div>

【参考方案1】：

您不能更改 iframe 中的任何样式，除非：

1) 你拥有 iframe 的来源

2) 您的网站位于iframe-origin.com/mysite

3) iframe 允许您在包含嵌入内容的页面中插入脚本

4) 您的站点可以按照 CORS 规范与 iframe.com 通信，即通过 postMessage API 共享数据。

以上所有内容都非常罕见。最常见的方式通常是通过有限的公开 API，允许您自定义渲染 iframe 的特定位。