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 响应的标头称为X-Frame-Options。从文档中：

X-Frame-Options HTTP 响应标头可用于指示是否应允许浏览器以 <frame>或呈现页面<iframe>。网站可以使用它来避免点击劫持攻击，方法是确保其内容不会嵌入到其他网站中。

例如，并非所有服务器都发送此响应标头（演示），这有效：

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