javascript - 如何使用 jquery 操作 iframe 对象

标签 javascript jquery html iframe

我已经浏览了很多与此问题相关的主题,但无法获得所需的输出。

我在内部调用 iframe 和 html,如下所示:

 <iframe class="full-screen-preview__frame" id="nitseditpreview" src="himu/index.php" name="preview-frame" frameborder="0" noresize="noresize" data-view="fullScreenPreview">

假设在此 iframe 中我有一个类名如下的 h2 标签:

<body>
  <section id="about-us">
    <div class="container">
      <div class="text-center">
        <div class="col-sm-8">
          <h2 class="maincontent">
  Why with Us
  </h2>
        </div>
      </div>
    </div>
  </section>
</body>

如浏览器中的检查元素所示

通过使用 Jquery,我想操纵它,例如我想在其中添加边框。我已经尝试了很多东西,但我想如果有人修复了这个 bug,这个东西就会起作用,我的 jquery 看起来像这样:

$(document).load(function () {
$('#nitseditpreview').load(function () { //The function below executes once the iframe has finished loading
    $this = $(this);
    $('#nitsmenu', this.contents()).css('border', 'solid 1px #777');
});

});

不知道我在哪里做错了,即使我也遵循同源政策。

最佳答案

如果框架文档和框架文档都位于同一域中,则不需要沙箱属性或 CORS 跳环。但这里还有一些其他错误:

  • $(document).load(...) 应该是 $(document).ready(...) (因为它已经加载了你的脚本运行)
  • 您定义了$this = $(this),但随后在下一行中尝试使用裸露的this
  • 您正在尝试匹配框架文档中似乎不存在的#nitsmenu

以下内容似乎有效,尽管我担心该 iframe 的 .load() 上可能仍然存在竞争条件:

$(document).ready(function() {
  $('#nitseditpreview').load(function() {
      $(this).contents().find('.container').css('border', 'solid 1px #777');
  });
});

http://plnkr.co/edit/tCEHdU0ckg5q4w4tPVFU

关于javascript - 如何使用 jquery 操作 iframe 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36890199/

相关文章:

javascript - 检查背景图片javascript时必须写完整路径

javascript - 在 html 中搜索 Javascript

javascript - 在 html 属性中存储非文字 js 对象

javascript - 如何将 JavaScript 元素转换为 Web 应用程序或 API?

javascript - 使用 augularfire OAuth 登录 facebook 的策略

javascript - 使用jquery将字符串数组转换为整数

javascript - 使用 Ajax MVC4 更新 div

html - 带 CSS 和 HTML 的按钮 - 按 ID 选择

javascript - 如何从这两个内容相同但结构不同的 contenteditable div 中获取相同的文本?

javascript - 在同步方法中等待异步方法?