Google Chrome Won't Allow Iframe to Load an Html File
I've Got This Iframe That Is Working Fine on Ff, but It Doesn't Seem to Load up on Google Chrome. Could Someone Tell Me Why This Is Happening? My Iframe: 0 5...
I've got this iframe that is working fine on FF, but it doesn't seem to load up on Google Chrome.
Could someone tell me why this is happening?
My iframe:
<iframe src="" height="700" width="990" frameborder="0" scrolling="no">
</iframe>5 Answers
I tested it and it works OK in chrome on my end. My guess is that you have it set up so the page containing the iframe is being accessed via https. If the page is https, you cannot load a iframe on that page that is not https. It will result in a "mixed-content error" and for security purposes it will not load.
It works in FF because FF is more lax about this security restriction and Chrome happens to be more strict on mixed-content errors.
Problem was with chrome version 27.xx & 28.xxx In this version chrome was having issue of url redirection,giving empty result(302 error).
Adding the solution for someone who might be struggling like me. I solved the issue by adding the option for Content Security Policy.
<httpProtocol>
<customHeaders>
<add name="Content-Security-Policy" value="frame-ancestors " />
<!-- Test this option as Chrome supports CSP now for Iframe opening-->
</customHeaders>
</httpProtocol>
i have the same issue, i dont know for what, it think is because chrome blocks for security, anyway, i can resolve like this:
in your html:
<embed src='your_path' width='100%' height='100%' type="application/pdf" />
Finally after many investigations and searches the below code solve the issue:
<style type="text/css">
iframe {
border: none;
width: 100%;
height: 500px;
}
@media (min-width: 1024px) {
.content_viewport {
border: 0px none;
height: 900px;
width: 100%;
}
}
@media (max-width: 1023px) {
.content_viewport {
border: 0px none;
height: 900px;
width: 100%; }
}
@media (min-width: 768px) {
.content_viewport {
border: 0px none;
height: 900px;
width: 100%; }
}
</style>
<div style=" overflow: hidden; margin: 15px auto; max-width: 880px;"><iframe class="content_viewport" scrolling="no" src="<Your URL>"></iframe>
<p> </p>
</div>
Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.
