对于任何对此有具体了解的人来说，这一切都与 WordPress“主题定制器”有关，尽管这没有必要回答这个问题。
基本上，我有一个页面(在 PHP 中)，其中包含左侧“ Pane ”设置，这些设置适用于 iframe 的内容，即屏幕的右侧部分。
从概念上讲，我希望使用 jQuery draggable使主背景图像的CSS background-position 通过draggable 函数进行调整。我需要在 customize.php 页面上应用 draggable()，将脚本排入队列，然后在 iframe 内操作 DOM。它需要在容器/父级别完成，因为该级别有一个设置将更新 X 和 Y 坐标并将它们保存在存储在那里的设置中。
我认为我需要的可能是不可能的，但我想知道是否可以使用 javascript 来执行以下操作两者:
- 获取iframe的内容
- 在 iframe 内操作 DOM，通过
draggable()调整背景图像，并将background-position坐标存储为数据属性然后将它们保存到适当的设置输入字段。
根据我的经验，从“父”/容器级别操作 iframe 内的 DOM 很困难，我想知道是否有什么我不知道的东西，这绝对是不可能的，或者有一些解决方法吗？ (注意源域是相同的，所以不会有跨域的iframe问题)
最佳答案
这是我的父 iframe 通信测试实现的简化代码。我添加了一些如何使用它的示例。但我必须注意，它超出了我的实验室部分，而且我目前没有时间检查它是否完全跨浏览器兼容。但如果不是，则只需要做一些小的改变。 (编辑在当前的 chrome、ff 和 IE 6-9 中测试)
希望这能帮助您解决问题。但我现在不能保证它会完美运行(但我很确定)。
父级代码
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>index</title>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
(function($, window, undefined) {
var iframe;
// the connector object the will be passed to the iframe and will be used as "API"
var parentConnector = {
_window : window, // a reference to the parents window (not really necessary but nice to have)
$ : $, // a reference to the parents jQuery that can be accessed from the iframe (use with caution)
// here you will define you "API" for the parent (the functions you want to call from the iframe )
setElementValue : function(selector, value ) {
$(selector).val(value);
}
}
// this function is called by the iframe to register the iframe in the parent
window.registerIFrame = function( iframeHelper ) {
//if you have multible iframe in the parent you could change the code here to store them in e.g. an arrray or with a key in an object
iframe = iframeHelper;
// register the parent in the iframe
iframe.registerParent(parentConnector);
}
$(document).on("click",".slideUp",function(event) {
event.preventDefault();
/*
call a function on the helper object, this is the savest way for the commincation because
there is it minimizes the risk to mix the differnt context
*/
iframe.slideUp();
/*
This way would work at least in chrome, with the current version with jquery, but it relays the jQuery implementation
that the correct document is used.
*/
iframe.$(".info-from-parent").val("slideUp");
/*
One thing you should NEVER do is the following:
iframe.$(".info-from-parent").append( $("<div></div>") );
The reason you should not do this is because this mixes DOMElements of different context.
This will result in unexpected crashes/bahaviors in some browsers (but could work in others, or at least it will look like it would work)
*/
});
// same as the slide down, it is just there to have some interaction sample
$(document).on("click",".slideDown",function(event) {
event.preventDefault();
iframe.slideDown();
iframe.$(".info-from-parent").val("slideDown");
});
})(jQuery, window);
</script>
</head>
<body>
<input type="text" class="info-from-iframe"><br>
<a href="#" class="slideUp">slideUp</a> <a href="#" class="slideDown">slideDown</a><br>
<iframe src="iframe.html"></iframe>
</body>
</html>
iframe 代码
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>iframe</title>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
(function($,window,undefined) {
//the connector object the will be passed to the parent and will be used as "API"
var iframeConnector = {
_window : window, // a reference to the iframes window (not really necessary but nice to have)
_parent : undefined,
$ : $, // a reference to the iframes jQuery that can be accessed from the parent (use with caution)
// this function is called by the parent to register the parent in the iframe
registerParent : function( parent ) {
this._parent = parent;
},
/* here you will define you "API" for the iframe (the functions you want to call from the parent )*/
slideUp : function() {
$(".test").slideUp();
},
slideDown : function() {
$(".test").slideDown();
},
setElementValue : function(selector, value ) {
$(selector).val(value);
}
};
// register the iframe in the parent
window.parent.registerIFrame(iframeConnector);
$(document).mousemove(function(event) {
//use the parents "API" to call a function in the parent
iframeConnector._parent.setElementValue(".info-from-iframe", event.clientX+", "+event.clientY);
});
})(jQuery,window);
</script>
</head>
<body>
<input type="text" class="info-from-parent"><br>
<div class="test">
iframe
</div>
</body>
</html>
关于Javascript:数据可以通过 iframe 双向传递吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15884994/