如何在WordPress站点为外部嵌入的iFrame插入CSS样式

答案是不行，直接通过脚本修改这个跨域iFrame的内部样式会被浏览器的同源策略阻止。

核心原因： #

浏览器的同源策略明确规定，只有当两个页面的域名、协议、端口完全一致时，脚本才能互相访问DOM结构。你的WordPress站点与iFrame指向的beautydayspa1.gettimely.com属于不同域名，属于跨域场景，浏览器会直接禁止你的脚本读取或修改iFrame内部的元素和样式。

可行的替代方案： #

• 优先用工具自带配置：大多数第三方嵌入工具（比如这个Timely预约插件）都在后台提供了自定义外观的功能，你可以直接在Timely的管理后台调整颜色、字体、布局等样式，设置完成后嵌入的iFrame会自动同步这些样式。
• 检查嵌入URL参数：部分工具支持通过URL参数传递样式配置，你可以查阅Timely的嵌入文档，看看有没有类似&color=xxx这类参数来快速调整样式。
• 调整父页面CSS：你可以修改iFrame本身的样式（比如你已经设置的宽高、边框），或者用CSS滤镜（filter）、变换（transform）等属性间接改变iFrame的整体视觉效果，但这种方法无法修改iFrame内部具体元素的样式。
• 自定义Timely页面样式：如果你拥有这个Timely账户的管理权限，可以在Timely后台添加自定义CSS代码，直接修改预约页面的样式，这样所有嵌入该页面的iFrame都会同步生效。

你的iFrame代码示例：

<iframe src="//beautydayspa1.gettimely.com/book/embed?blablabla" scrolling="no" id="timelyWidget" style="width:480px;height:500px;border:1px solid #4f606b"></iframe>

内容的提问来源于stack exchange，提问作者Tester Ayie