2017-05-19 2 views
-1

私は現在このページで作業しています: http://www.prosperitycapitaladvisors.com/become-a-prosperity-capital-advisor/とinfusionsoft(iframe形式)と呼ばれる埋め込みJavaScriptフォームがあり、クライアントから応答が必要です。iframe形式の中でCSSを上書きしたりカスタムスタイルを挿入することは可能ですか?

iframeフォーム内でCSSをカスタマイズしたりカスタムスタイルを挿入する方法はありますか?

ありがとうございます!

+0

申し訳ありませんが、iframeのコンテンツのCSSオーバーライドボディスタイルを解決できません。 アクセスできない別のサーバーからのページのスタイルを変更したい、iframeだけで –

答えて

0

div内にIframeをラップし、別のメディアを使用してiフレームの寸法を制御できます。

browser_ = /iPhone|iPad/i.test(navigator.userAgent); 
 
isInIframe = (window.location != window.parent.location) ? true : false;
iframe { 
 
    border: 0; 
 
} 
 

 
@media handheld, 
 
only screen and (max-width: 320px) { 
 
    .ReferAFriendWrapper { 
 
    height: 1190px; 
 
    } 
 
} 
 

 
@media handheld, 
 
only screen and (min-width: 321px) and (max-width: 479px) { 
 
    .ReferAFriendWrapper { 
 
    height: 1190px; 
 
    } 
 
} 
 

 
@media handheld, 
 
only screen and (min-width: 480px) and (max-width: 639px) { 
 
    .ReferAFriendWrapper { 
 
    height: 960px; 
 
    } 
 
} 
 

 
@media handheld, 
 
only screen and (min-width: 640px) and (max-width: 750px) { 
 
    .ReferAFriendWrapper { 
 
    height: 760px; 
 
    } 
 
} 
 

 
@media handheld, 
 
only screen and (min-width: 751px) and (max-width: 768px) { 
 
    .ReferAFriendWrapper { 
 
    height: 600px; 
 
    } 
 
} 
 

 
@media handheld, 
 
only screen and (min-width :769px) and (max-width: 900px) { 
 
    .ReferAFriendWrapper { 
 
    height: 540px; 
 
    } 
 
} 
 

 
@media handheld, 
 
only screen and (min-width :901px) and (max-width: 1078px) { 
 
    .ReferAFriendWrapper { 
 
    height: 500px; 
 
    } 
 
} 
 

 
@media handheld, 
 
only screen and (min-width :1079px) and (max-width :1200px) { 
 
    .ReferAFriendWrapper {} 
 
} 
 

 
.ReferAFriendWrapper { 
 
    position: relative; 
 
    padding-bottom: 70%; 
 
    /* 16:9 */ 
 
    padding-top: 25px; 
 
    margin-top: -0px; 
 
    overflow: hidden; 
 
} 
 

 
.ReferAFriendWrapper iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
}
<div style="-webkit-overflow-scrolling: touch !important;"> 
 
    <iframe src="http://stackoverflow.com/questions/5661868/asp-net-calling-javascript-in-user-control-server-side-method" scrolling="no" border="0" width="800"></iframe> 
 
</div>

0

何限り、それはセキュリティの抜け穴に対するワームの缶を開けてしまうため、それがクロスドメインであるとして任意のIFRAMEを編集することがなかったです。

表示しているiframeが同じドメインの原点である場合は、変更することはできますが、

関連する問題