在iframe中加载url并添加一个类 - loading url in an iframe and adding a class

loading url in an iframe and adding a class

本文关键字：一个添加 iframe 加载 url | 更新日期: 2023-09-27

我遇到的情况与此非常相似：http://bradfrost.com/demo/ish/

我需要做的是：当我在栏中输入一个新的url并按GO时，应该给iframe一个类。

我试过

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

但是整个页面被重新加载，我失去了新添加的类。有别的办法吗？

我的页面在php中，html是以下

<?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>

感谢您的帮助：）

您应该拦截表单提交。试试这个：

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

iframe正在重置。但是，您可以通过瞄准iframe的内容来获得所需的内容。

$（"iframe"）.contents（）.find（"#chosenElement"）.addClass（"myClass"）；