iframe design changing back to old design on page reload

Question

I styled an external iframe here by following @SequenceDigitale.com answer here. Everything is good but when I sort the table data or search within that iframe, the page reloads but old design comes up. Why is that?
Code
I am using this code to fetch data from external resource

<?php

$content = file_get_contents('http://www.exhibition-directory.com/expostars/index.php/');
$content = str_replace('</title>','</title><base href="http://www.exhibition-directory.com/expostars/" />', $content);
$content = str_replace('</body>','<link rel="stylesheet" href="http://www.informatixtech.com/expostars/wp-content/themes/hotstar-child/hotstar-child/custom.css" type="text/stylesheet" /></body>', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.informatixtech.com/expostars/wp-content/themes/hotstar-child/hotstar-child/custom.css" type="text/stylesheet" /></head>', $content);
echo $content;

?>

and this is my iframe code

<?php
                echo '<iframe id="iframe" src="http://www.informatixtech.com/expostars/search-page.php" name="Stack" height="1200" frameborder="0" scrolling="auto" width="100%"></iframe>';?>

because when you submit the form it goes to http://www.exhibition-directory.com/expostars/index.php rather than your script, you need to proxy all requests — Michail Strokin, Jan 27 '16 at 17:37
@MichailStrokin any hint how to proxy, i am not too expert. I just dont want my entire work to be wasted. Thanks — StealthTrails, Jan 27 '16 at 17:37
Does the form submit by ajax on other site , or through default browser form submit? You definietly need a proxy for the links so that each link points to your server to get a new version pulled from external site to be rendered — charlietfl, Jan 27 '16 at 17:45
You need to intercept all the clicks on links and send that url to your server, use the url sent to get new page. Same with form — charlietfl, Jan 27 '16 at 17:47

Michail Strokin · Accepted Answer · 2016-01-27T19:24:25.323

1

the form uses $_GET variables, so you might do something like

$content = file_get_contents('http://www.exhibition-directory.com/expostars/index.php?'.http_build_query($_GET));

so that all variables passed to the form are appended to the fetched URL

Add this so that form submits to your server instead:

$content = str_replace('<form name="searchForm" action="index.php" enctype="multipart/form-data"  method="get">','<form name="searchForm" action="http://www.informatixtech.com/expostars/search-page.php" enctype="multipart/form-data"  method="get">', $content);

update your CSS so that it doesn't rely on form[action=index.php]

update: Add this so that links are rewritten:

$content = str_replace("location.href='index.php?","location.href='http://www.informatixtech.com/expostars/search-page.php?", $content);

one more replace:

str_replace('<div class="sc-button-reset"><a href="index.php','<div class="sc-button-reset"><a href="http://www.informatixtech.com/expostars/search-page.php', $content);

edited Jan 27 '16 at 19:24

answered Jan 27 '16 at 17:53

Michail Strokin

531
3
8

actually it wont work, because you rely on other resources hosted on exhibition-directory – Michail Strokin Jan 27 '16 at 17:55
it doesn't work now because the server returns blank page instead of the page with the results, can you update the gist with the exact code you're using? – Michail Strokin Jan 27 '16 at 18:22
Sorry, I've typed 'search-form.php' instead of 'search-page.php', please update it and it should work fine (in the last line) – Michail Strokin Jan 27 '16 at 18:24
1

Sorry, mistyped that URL again :) you need to use your own URL (http://www.informatixtech.com/expostars/search-page.php) rather than exhibition-directory :) – Michail Strokin Jan 27 '16 at 18:45
1

use something like form[name='searchForm'] instead of form[action='index.php'] in your css as well so that it still looks good – Michail Strokin Jan 27 '16 at 18:50
i think it is not replacing actually – StealthTrails Jan 27 '16 at 19:10
1

it does work as expected, just update the CSS so that it looks good – Michail Strokin Jan 27 '16 at 19:12
oh yes search button is working but not the other one, I think i have to replace code for that button in the same way. right? – StealthTrails Jan 27 '16 at 19:17
right :) I've updated the answer with the last change you need :) – Michail Strokin Jan 27 '16 at 19:26
you are really great :) – StealthTrails Jan 27 '16 at 19:27
thank you so much for helping and teaching me something new :) – StealthTrails Jan 27 '16 at 19:30

score 0 · Answer 2 · answered Jan 27 '16 at 17:56

Within the pages you scrape and return in iframe add click handlers to all the links that require reload.

Using jQuery

$(function(){
    $('a').click(function(){
        var otherSiteHref = encodeURIComponent(this.href);
        var yoursSiteProxyUrl ='/path/to-your-php?url=' + otherSiteHref ;
        this.href = yoursSiteProxyUrl ;
    });
});

Then at server decode the $_GET['url], get the new html from remote site and deliver it.

For the form, set up a controller method in your php and change the action to point to your proxy

$('#searchForm').attr('action', '/your-search-proxy.php');

You will need to make a cURL request to other site for the search form.

this might be a better approach but it won't work without JS — Michail Strokin, Jan 27 '16 at 18:11

iframe design changing back to old design on page reload

2 Answers2