我已经浏览了很多与此问题相关的主题,但无法获得所需的输出。
我在内部调用 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');
});
});
关于javascript - 如何使用 jquery 操作 iframe 对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36890199/