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:

<iframe src="http://tripsketch.com/page?s=TheCavendish#!Id=1024&Name=London&Type=City&view=Attraction" height="700" width="990" frameborder="0" scrolling="no">
</iframe>

回答1:

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.

回答2:

Problem was with chrome version 27.xx & 28.xxx In this version chrome was having issue of url redirection,giving empty result(302 error).

回答3:

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 https://www.<preferredwebsitedomain>.com" />
    <!-- Test this option as Chrome supports CSP now for Iframe opening-->
  </customHeaders>
</httpProtocol>

回答4:

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" />

回答5:

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>&nbsp;</p>
</div>

来源：https://stackoverflow.com/questions/18223028/google-chrome-wont-allow-iframe-to-load-an-html-file

标签

google-chrome

iframe