iFrame在iFrame中更改css类

Question

我需要支持修改iFrame对象：我需要对我的网站中嵌入的Google表单进行个性化设置。 我得到的唯一问题是，在iFrame里面，实际的表单宽度（不是iFrame的宽度）最大为640px，它被类“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

，或者如果你想要写在SAPARATE 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的name属性