javascript - Jquery 中的 iframe 未加载页面

Question

我试图用 Jquery 尝试构建一个 iframe，我认为通过这段代码可以直接实现，但它不起作用..

jQuery(document).ready(function() {
              $("#opposition a").click(function(e) {
              var first_id  = $(this).attr('id');
              var second_id = $("h1").attr('id');
              $("#opposition img").mouseover(function() {
              $(this).css('border-width','5px');
        });
              $("#opposition img").mouseout(function() {
              $(this).css('border-width','2px');
        });
              $.get("compare_proc.php",{
              id:first_id,
             id2:second_id
    });
     $("#frame").attr("src", "http://www.google.com/");
              e.preventDefault();
                });
    });

HTML:

 <div id="mydiv"><iframe id="frame" src="" width="100%" height="300">
   </iframe></div>
  <button id="button">Load</button>

Answer 1

这是因为 Google.com 响应的 header 名为 X-Frame-Options 。来自文档:

The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame> or <iframe>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.

并非所有服务器都会发送此响应 header ，例如( demo )，这有效:

<div id="mydiv"><iframe id="frame" src="" width="100%" height="300">
   </iframe></div>
  <button id="button">Load</button>
<script>
$('#button').on('click', function() {
    $("#frame").attr("src", "http://wikipedia.com");
});
</script>