如何使用jQuery操纵iframe对象

Nitish kumar

我经历了很多与此问题相关的主题，但无法获得所需的输出。

我正在这样调用html和html中的iframe：

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

如浏览器中的inspect元素所见

通过使用Jquery，我想进行操作，例如，我想在其中添加边框。我已经尝试了很多东西，但是我猜只要有人修复了这个问题，这个东西就可以工作，我的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');
});

}）;

即使我也遵循相同的原产地政策，也不知道我在哪里做错了。

丹尼尔·贝克（Daniel Beck）

如果框架文档和框架文档都在同一域中，则不需要沙箱属性或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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。