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屬性