在iframe中加载网址并添加一个类

i have a situation very similar to this: http://bradfrost.com/demo/ish/

what i need to do is the following: when I input a new url in the bar and press GO, the iframe should be given a class.

i have tried

$( "button" ).click(function() {
  $("iframe").addClass("new-class")
});

but the whole page gets reloaded and i lose the newly added class. is there any other way to do this?

my page is in php and the html is the following

<?php $src = (empty($_GET['url'])) ? 'http://css-tricks.com/' : addslashes(filter_input(INPUT_GET, 'url', FILTER_SANITIZE_URL));?>
    <header class="header">
        <form method="get" action="" id="url-form">
            <label for="url" id="url-toggle" class="url-toggle">URL</label>
             <input id="url" type="text" name="url" placeholder="Enter any URL" value="<?php echo $src; ?>" />
             <button id="url-submit">Go</button>
          </form>
    </header>

    <iframe id="sg-viewport" src="<?php echo $src; ?>" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>

    <footer class="footer">
        footer
    </footer>

thanks for helping :)

you should intercept form submission. try this:

$("#url-form").submit(function(e) {
    e.preventDefault();
    $("iframe").addClass("new-class");
});

The iframe is resetting. However, you might get what you need by targeting the contents of the iframe.

$("iframe").contents().find("#chosenElement").addClass("myClass");