如何使用jQuery操作iframe對象

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 個解決方案

解決方案1
1 已采納 2016-04-27 13:07:14

如何使用jQuery操作iframe對象

問題描述

1 個解決方案

解決方案1 1 已采納 2016-04-27 13:07:14

解決方案1
1 已采納 2016-04-27 13:07:14