Have you ever had that experience? Encounter a technical problem or a keyword, Google, Baidu, Zhihu…… , typing and searching over and over again to get the best results.

Too tired, these two days really can not stand, just want to have a website, there is a similar baidu or Google input box, input once, we care about the results of each search engine are displayed? Failed to find (what you found either didn’t work or didn’t meet your needs)

So, since there are no wheels, write your own.

Write this kind of aggregation type website, the first thought of course is crawler, but crawler still have to rely on the server, no (poor) how to break? That’s okay. We’ll do it the pure front-end way. There’s plenty of free space on the Internet. Here we choose the free page service provided by Coding.net, you can put some static resources, of course, you can choose Github, but the speed will be relatively slow. Then I went to Freenom and registered a free domain name 🙂

www.moresearch.ga/ call “cat search”, cat search, give you more results.

Everything is ready except the east wind. It’s code time

Take a look at the final image:

Unter den! Unter den! Unter den!

Yes, a simple page like this will do. It may seem simple (and I thought so at first), but I ended up in a lot of trouble. 😓

1. Prepare the search engine url

Similar to www.baidu.com/s?wd= {query… This way, use {query} to represent a variable, the keyword you want to search for, and then go to the link to get the results of the search.

Here are a few for you:

{{query} Google: baidu: http://www.baidu.com/s?wd= https://www.google.com/search?q= query} bing: https://www.bing.com/search?q={query} v2ex: https://www.google.com/search?q=site:v2ex.com/t {query} zhihu: https://www.zhihu.com/search?type=content&q={query}
Copy the code

2. Use iFrame to aggregate the search results to one page

As shown in the diagram just now, we want to use this interface structure to display the aggregation results, so as to make full use of the advantages of PC’s large screen and improve efficiency.

The core technology is to use iFrame, I also take it for granted so easy… But test access what the hell is this?

Emmm, reject iFrame nesting!

In this case, instead of trying to challenge the browser’s strategy of cracking from the front, the best way is to take a detour:

  1. Talk about business cooperation with relevant websites… What am I talking about?? Forget I said anything
  2. Get it through the API
  3. The agent
  4. Forcing users to use IE6??

Obviously, only the second option is acceptable to our front-end through API, and the pure front-end has to be loaded through iFrame after getting it through Ajax.

Core code:

onSearch(inputText: string) {
    if (this.defineURL) {
      this.viewData.isLoading = true;
      this.viewData.isShowFrame = true;
      const url = this.defineURL.replace(`{query}`, inputText);
      this.urlGO = encodeURI(url);
      this.msService.httpClient.get(this.urlGO, {responseType: 'text'}) // get requests HTML
        .subscribe(value= > {
          const iframe: any = document.getElementById(this.scrnIndexID);
          const iframedoc: any = iframe.contentDocument || iframe.contentWindow.document;
          iframedoc.children[0].innerHTML = value; // iFrame loads HTML
          let index = 0;
          let isFind = false;
          while (index < this.defineURL.length) {
            const number = this.defineURL.indexOf('/', index);
            if (number - 1> =0 && url.charAt(number - 1)! = =':' && url.charAt(number - 1)! = ='/') {
              isFind = true;
              index = number;
              break;
            } else {
              index = number + 1; }}const htmlBaseElement = document.createElement('base');
          htmlBaseElement.href = isFind ? this.defineURL.substring(0, index + 1) : '/';
          htmlBaseElement.target = '_blank';
          iframedoc.children[0].children[0].appendChild(htmlBaseElement);// HTML Sets the base URL
          this.onLoad();
        }, error= > {
          this.onLoad();
        });
      // this.viewData.url = this.ds.bypassSecurityTrustResourceUrl(this.urlGO);}}Copy the code

3. Impenetrable pit: cross domain

There is always a pit around the front end, that is cross-domain. I also fell into this pit when I tried to retrieve the results via the API 🙁

Of course, there are many ways to address cross-domains: JSONP, IFRame, proxy/reverse proxy, CORS, and so on. But there is no back-end cooperation, we front-end to do, it seems that can only build a proxy server, and I do not have a server……

The ultimate big recruit

Write this, I already disheartened, in the hand does not have the server really what also can’t do? Too bad I wrote so much code… no

For your own use, there’s one ultimate way to combat cross-domains: disable the browser same-origin policy!

Take chrome under Mac as an example :(Windows and other browsers can search by themselves)

Mac: 1. Close the browser. 2-a "Google Chrome" --args --disable-web-security  --user-data-dir
Copy the code

Above, we can search happily again 🙂

Ps. If you know the source site limit iFrame nesting, Ajax pure front-end cross-domain better solution, welcome to private comments, thank 🙏

More original in the public account: “Elegant programmer ah.” How programmers make money. Elegant technology, elegant money.

Pay attention to the public number, you can add my good friends exchange, also can add group technical exchange oh.