Question

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

我在内部调用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>

浏览器中的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');
});

}）;

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

Answer 1

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

如何使用jquery操作iframe对象

1 个答案: