iFrame 更改 iFrame 中的 css 类

Question

我需要修改 iFrame 对象的支持：我需要个性化嵌入在我的网站中的 Google 表单。 我遇到的唯一问题是，在 iFrame 内部，实际表单宽度（不是 iFrame 宽度）最大为 640 像素，并且是由“freebirdFormviewerViewCenteredContent”类强制执行的。 现在，在 iFrame 中我无法修改它，但如果我理解正确，我可以用 Javascript 覆盖它。我需要将宽度从 640px 更改为 90%。 有人知道如何构建 javascript 或有一个工作脚本吗？

我必须承认我不太擅长 Javascript，因此我将非常感谢您的每一次帮助。

非常感谢！

Answer 1

如果您使用 Jquery 尝试如下，

    $(function(){
    $('#iframe1').on('load', function(){
        $(this).show();
        console.log('load the iframe')
         $(this).contents().find("head")
      .append($("<style type='text/css'>  .my-div2{width:90% !important;}  </style>"));
    });
});

.my-class 是表单类

working Demo

或者，如果您想在单独的 css 文件中编写样式，请执行以下操作。 在 style.css 文件中写入 css

var cssLink = document.createElement("link");
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['frameName'].document.body.appendChild(cssLink);

frameName 是 iframe 名称属性