CODEWITHSUNDEEP
javascripthtmlcssiframe
Big AA
Big AA

Reputation: 11

Not able to get iframe to work

I'm basically trying to create a page that can show 3 Google searches of the user's choice simultaneously. I had code that did this for images (would go search for the input on Flickr and display the image) but I thought it would be cool to apply the same concept with Google searches. What am I doing wrong?

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

Here's the CSS code:

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

Upvotes: 1

Views: 52

Answers (1)

repzero
repzero

Reputation: 8412

Google is preventing cross origin framming. Some servers however do set that X-Frame Header for cross domain request.

Also keep in mind the contents will also be blocked if your a trying to access secure info (https) from an insecure source (http)

This is the message from the browser console

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

Upvotes: 1

Related Questions