首页 > 解决方案 > 如何解决 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>

标签: javascripthtmliframeairtable

解决方案


如果我没记错的话,你只能影响 IFrame 的样式,如果它来自与你的网站相同的服务器,因为同源策略。

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


推荐阅读