iframe is disappearing in php website

[searchmed]

Hi,

I've been trying to troubleshoot this iframe issue all day. I need help. First, the issue is an iframe on the frontpage is to load a php script for an Video ad. Second the frontpage is a php search script. Now, when you visit the frontpage initially everything is working fine; iframe on the frontpage loads and the video ad loads as well, bravo so far. Then the probably shows itsself when you click on another nav link and you either hit the back button on the browser or the link to get back to the frontpage the iframe has vanished.

Has anyone run across this sort of issue? I've tried to use Javascript to do a reload of the browser, but no luck.

Thanks for any advice

URL: https://www.searchmedicals.com/

[rproffitt]

Tried it, no video ad shows for me. I'm using Opera with the usual defaults.

[Dani]

I was able to successfully reproduce your issue, and I did see that the HTML code when the page works is identical to the HTML code when the page does not work.

However, I'm not sure what ad server you're using to generate the ad, itself. At first I wondered whether it is it possible the ad is frequency capped (e.g. only show it if a session cookie doesn't already exist in the web browser)? It's very common for most ads to be frequency capped. However, upon further inspection with Chrome DevTools, I do see that when the ad isn't displayed, it is still loaded by the browser (the file show_i.php?compl=380).

However, I think I figured out what's going on. You have too much AJAX going on for your own good.

If I go to your homepage, it loads as a normal webpage. There's some Javascript that says to download this show.php file and then inject it as an iframe into the page. However, if I then click on the Contact or Terms of Service or Privacy links at the bottom of the page, they don't load like regular links. Instead, you're using AJAX to dynamically inject the contents of the page into the DOM without a page refresh. If I then click on the Web link at the top left of the page to return to your homepage, it does it the same way. It use AJAX to perform an xhr request and load the JSON that looks something like:

title: blah ...
content: ...
footer: ...
header: ...

That overwrites the page contents, but it's just injecting the HTML. It's not executing all the Javascript contained in there properly. I suspect that's what's going on and causing your issues. Just make the links work normally. Keep it simple. Not everything needs to be an SPA (single page application).

[Dani]

Searchmed, were you able to fix your issue?

[Dani]

I am trying to implement a work-around until I can get the proper coding in place. I've been reviewing how to use the window.location.reload. No Luck.

I don't believe that's the correct strategy. What I would do is make sure that the Javascript that injects the <iframe> is set to trigger immediately after the AJAX xhr request that updates the HTML contents of the DOM. Currently I think you have it just set to trigger after initial webpage load. You also want it to trigger whenever the HTML contents are updated.

[Dani]

searchmed, I took another look at it after you private messaged me, and you might want to focus on the file https://www.searchmedicals.com/themes/search/assets/js/functions.js

Contained within that file is the following function:

/**
 * Send a GET or POST request dynamically
 *
 * @param   argUrl      Contains the page URL
 * @param   argParams   String or serialized params to be passed to the request
 * @param   argType     Decides the type of the request: 1 for POST; 0 for GET;
 * @param   options     Various misc options
 * @return  string
 */
function loadPage(argUrl, argType, argParams, options = {loadingBar: true}) {
    if(options.loadingBar) {
        loadingBar(1);
    }

    if(argType == 1) {
        argType = "POST";
    } else {
        argType = "GET";

        // Store the url to the last page accessed
        if(argUrl != window.location) {
            window.history.pushState({path: argUrl}, '', argUrl);
        }
    }

    // Request the page
    $.ajax({
        url: argUrl,
        type: argType,
        data: argParams,
        success: function(data) {
            // Parse the output
            try {
                var result = jQuery.parseJSON(data);

                $.each(result, function(item, value) {
                    if(item == "title") {
                        document.title = value;
                    } else if(['header', 'content', 'footer'].indexOf(item) > -1) {
                        jQuery('#'+item).replaceWith(value);
                    } else {
                        jQuery('#'+item).html(value);
                    }
                });
            } catch(e) {

            }

            // Scroll the document at the top of the page
            jQuery(document).scrollTop(0);

            // Reload functions
            reload();

            if(options.loadingBar) {
                loadingBar(0);
            }
        }
    })
}

I'm not quite sure what reload(); actually reloads, but right above or below that line, try adding:

$.getScript("https://www.ads.searchmedicals.com/show.js");

That should actually have the opposite effect, and inject the ad at the bottom of all pages, if I am reading your code correctly.

What you really need to do is stop trying to be a SPA. Why did you create it that way to begin with? It doesn't make sense for these types of pages to be entirely AJAX driven, and actually is horrendous for SEO.

[Dani]

I did some more research and it can't hurt to try the following:

Replace line 40 of the above code that currently says:

jQuery('#'+item).replaceWith(value);

with

var content = jQuery.parseHTML(value, document, true);
jQuery('#'+item).replaceWith(content);

Ignore the $.getScript() in my previous post. This should actually be an elegant solution. However, this is all thoroughly untested. However, it should not be too much more complicated than this. At the very least, you know that's the line that definitely needs to be modified to fix your bug.