How Can You Embed An iframe IN A Google Search Result Page

Question

For whatever reason, that's not important, i'm trying to combine google shopping with another page via an iframe.

I've tried the approach proposed here, consisting of embedding a google custom search query in an iframe, but google custom search does not allow access to the shopping tab.

I figured, if you can't embed Google, embed yourself in it. So I proceeded to inject some jQuery in the page

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type.
jQuery.noConflict();

clean up the google shopping search results page to what I needed, namely the html inside the div#search

jQuery(function($) {$('#search').show().parentsUntil('body').andSelf().siblings().hide();});

Create an iframe and inject it:

var iframe = document.createElement('iframe')
iframe.src="http://example.com"
iframe.width="100%";
iframe.height="500";
iframe.style="visibility:visible";
document.body.appendChild(iframe)

Only problem is the iframe doesn't load the contents of the page and in turn is blank. If you try the above snippet in any other page, it works. It seems like Google is blocking the iframe from loading. How can I get around that?

Answer 1

Google seems not to work using an iframe... Even if you are not using JS. What you should use instead is the Google Custom Search API, wich allows you to create a custom search engine. You just have to enter an example website, change the Option to Search all the web. and remove your entered website again. To create a custom Search engine you'll need a google account. Start here.

Answer 2

When I run that code, the following error is reported in my console:

VM259:7 Mixed Content: The page at 'https://www.google.co.uk/?gws_rd=ssl' was loaded over HTTPS, but requested an insecure resource 'http://example.com/'. This request has been blocked; the content must be served over HTTPS.

Changing it to an HTTPS URL:

var iframe = document.createElement('iframe')
iframe.src="https://example.com"
iframe.width="100%";
iframe.height="500";
iframe.style="visibility:visible";
document.body.appendChild(iframe)

… makes it work fine (albeit it tucked behind the logo):