Question

我基本上试图创建一个页面，可以同时显示用户选择的3个谷歌搜索。我有代码为图像执行此操作（将在Flickr上搜索输入并显示图像）但我认为在Google搜索中应用相同的概念会很酷。我做错了什么？

</style>
 </head>
  <body>

<div class="comic" >
  <div id="panel-1" class="scene" >
    <iframe id="search-1"></iframe>
    <p   id="topic-1">
      Topic: <input type="text" id="topic-input-1">  
      <button onclick="setSearch(1)" class="set-search-button">Go</button>
    </p>
  </div> 

  <div id="panel-2" class="scene">
    <iframe id="search-2"></iframe>
    <p   id="topic-2">
      Topic: <input type="text" id="topic-input-2">  
      <button onclick="setSearch(2)" class="set-search-button">Go</button>
    </p>
  </div> 

  <div id="panel-3" class="scene">
    <iframe id="search-3"></iframe>
    <p   id="topic-3">
      Topic: <input type="text" id="topic-input-3">  
      <button onclick="setSearch(3)" class="set-search-button">Go</button>
    </p>
  </div>


<script>
  function setSearch(panel){
    var query;
    query=document.getElementById("topic-input-"+panel).value
    document.getElementById("search-"+panel).src ="https://www.google.ca/#q="+ query +"&*"

    document.getElementById("topic-"+panel).style.display="none"; 
  }

</script>

这是CSS代码：

<style>
.comic {
  max-width: 826px;
  margin: 60px auto 0;

}
.scene {
  width: 250px;
  height: 250px;
  border: 3px solid black;
  background: white;
  margin: 8px;
  display: inline-block;
  position: relative;
}
.scene img {
  width: 100%;
  height: 100%;
  display: block;
}

</style>

Answer 1

谷歌阻止了交叉起源的填埋。但是，有些服务器会为跨域请求设置X-Frame Header。

另请注意，如果您尝试从不安全的来源（http）访问安全信息（https），内容也会被阻止

这是来自浏览器控制台的消息

Load denied by X-Frame-Options: https://www.google.ca/#q=f&* does not permit cross-origin framing.

无法让iframe工作

1 个答案: