如何解决 CSS 没有反映在 Air-Table 的 Iframe 上的问题？

问题描述

我正在尝试在 Air-Table iframe 中添加 CSS 属性，但 CSS 没有反映。

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe class="airtable-embed" id="calender" src="https://airtable.com/embed/shriqTxajodBzOTYb?backgroundColor=teal&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
    $('#calender').on('load',function() {
        $("iframe").contents().find("#embedBottomBarContainer").css("display","none");
    }); 
});
</script>

解决方法

如果我没记错的话，由于同源政策，您只能影响 IFrame 的样式，如果它来自与您的网站相同的服务器。

所以这可能是问题所在。您正在尝试更改非同源 IFrame 的样式