以iframe为目标的网址的帖子显示在iframe的iframe中

Question

This is a little bit confusing. I am trying to submit a url to an iframe on the same page. When I click submit, the iframe duplicates the current page, but the correct url is in the replicated iframe. I wonder if it goes on forever? The page that this is happening is http://www.4mobilesites.com and the code is below.

<div class="mobile-logo">
<H2>How does your website look on a Mobile Device?</h2>
<?php 
$keyurl = $_POST['siteurl'];
?>

<form method="post" target="mobileframe" >
Enter your website's URL: <input type="text" name="siteurl" value="http://" size="50"><br>
<input type="submit" value="VIEW">
</form><br>
<a name="iframe-1"></a>
<div class="theiframewrap"><iframe name="mobileframe" class="theiframeid" src="<?php echo "$keyurl"; ?>" id="mobileframe"></iframe></div></div>

If you submit a url in the form, then scroll down a bit in the iframe and squint, you will see the correct url in the iframe of the iframe.

Answer 1

You can use the simple post form like this. I think whats causing it is because of the target attribute on that form. Its sending your whole page into the iframe.

<?php
$keyurl = '';
if(isset($_POST['siteurl'])) {
    $keyurl = $_POST['siteurl'];
    echo $keyurl;
}
?>

<div class="mobile-logo">
    <H2>How does your website look on a Mobile Device?</h2>
    <form method="post">
        Enter your website's URL: <input type="text" name="siteurl" value="http://" size="50"><br>
        <input type="submit" value="VIEW" />
    </form><br>
    <a name="iframe-1"></a>
    <div class="theiframewrap">
        <iframe name="mobileframe" class="theiframeid" src="<?php echo $keyurl; ?>"></iframe>
    </div>
</div>

Alternatively, you could use only jquery for this:

<div class="mobile-logo">
    <H2>How does your website look on a Mobile Device?</h2>
    <form method="post">
        Enter your website's URL: <input type="text" name="siteurl" value="http://" size="50"><br>
        <input type="submit" value="VIEW" />
    </form><br>
    <a name="iframe-1"></a>
    <div class="theiframewrap">
        <iframe name="mobileframe" class="theiframeid" src=""></iframe>
    </div>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $('input[type="submit"]').on('click', function(e){
        e.preventDefault();
        var url = $('input[name="siteurl"]').val();
        $('.theiframeid').attr('src', url);
    });

});
</script>

_{Important Note: Not all sites will allow you to put theirs on your iframe. (Yahoo's and others)}