Member Avatar for akvilio

Hi.
I'm trying to make a simple page that contains a google search form. The results of the search needed to be shown in an iframe that is on the same page. I've managed to write the search form but I can't make the results appear in the iframe. Whenever i click search it just opens the google search page.
What do i miss here?

<html>
<head>
	<title>My Searhpage</title>
</head>
<body>
	<h1 align="center">Google Search</h1>
	<form action="http://www.google.com/search" method="get" enctype="text">
		<input type="text" name="q">
		<input type="submit" value="Search">
	</form>
	<iframe src="https://www.google.com/search?q=" width="800" height="600">
</body>
</html>

Please help.
Thanks in advance =)

  • 4 Contributors
  • 6 Replies
  • 612 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by akvilio

Dani AI

Generated

Short answer: the page you posted looks fine, but Google’s real search results won’t render inside an iframe because Google prevents it on the server side. and were right to flag that restriction; ’s target/name trick only controls where the browser opens the response — it doesn’t change the response headers that tell the browser “do not frame this page.” (developer.mozilla.org)

If the goal is “search on my page and show results there,” use Google’s supported integrations instead of trying to iframe google.com. The Programmable Search Element (the modern Custom Search widget) injects results into your page via Google’s JS and is the recommended approach; it replaces the old iframe-hosted option. Example (replace YOUR_CX with your engine id):

<script async src="https://cse.google.com/cse.js?cx=YOUR_CX"></script>
<div class="gcse-search"></div>

See Google’s Programmable Search Element docs for configuration and layout options. (developers.google.com)

If you need full control over markup or UX, call the Custom Search JSON API from your server (or client with proper key restrictions), then render the results yourself. A single-request pattern looks like:

// server-side or properly restricted client key
fetch(`https://www.googleapis.com/customsearch/v1?key=API_KEY&cx=SEARCH_ENGINE_ID&q=${encodeURIComponent(q)}`)
  .then(r => r.json())
  .then(data => { /* render data.items */ });

Read the Custom Search JSON API docs for parameters, quotas and billing. (developers.google.com)

Quick troubleshooting notes: don’t waste time trying more iframe hacks — browsers respect X-Frame-Options / CSP frame-ancestors sent by the site you’re embedding, so only an allowed endpoint will appear in-frame. For stable, supported results on your page, choose the Search Element or the JSON API and style the output to match your site. (developer.mozilla.org)

Recommended Answers

All 6 Replies

Member Avatar for carrieathomer

when i used ur code, google says, that it cannot load the results page in a frame.

Even I tried to add iframe name and use form target to that name.

You can directly login to google and use their readymade codes for your requirement.

Member Avatar for akvilio

The trick is to do it myself. i'm in a learning process, wanted to get more experienced opinion and help... but thanks anyway =)

Member Avatar for akvilio

Got it, thanks! Anyway, I figured it out with "target" and "name" attributes.

Member Avatar for rotten69

Did it work?

Member Avatar for akvilio

No. As sufyan2011 said, google don't allow their result pages be displayed in iframes as a security precaution.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.