文章/答案/技术大牛

发布

问无法让iframe正常工作
EN

Stack Overflow用户

提问于 2017-04-03 13:01:09

回答 1查看 40关注 0票数 1

我基本上是在尝试创建一个页面，可以同时显示用户选择的3个Google搜索。我的代码可以对图片执行此操作(在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>

css

iframe

javascript

html

回答 1

Stack Overflow用户

发布于 2017-04-03 13:05:25

谷歌正在阻止跨来源的框架。然而，一些服务器确实为跨域请求设置X-Frame报头。

还请记住，如果您试图从不安全的来源(http)访问安全信息(https)，则内容也将被阻止

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

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43176785

复制

相似问题

问无法让iframe正常工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法让iframe正常工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法让iframe正常工作
EN