Javascript：数据可以通过iframe双向传递吗？
对于任何有专门知识的人来说，这都与WordPress的“主题定制器”有关，尽管这不是回答这个问题的必要条件 基本上，我有一个页面（在PHP中），其中包含一个左侧“窗格”，设置应用于iframe的内容，这是屏幕的右侧部分 从概念上讲，我希望使用draggable函数来调整主背景图像的CSSJavascript：数据可以通过iframe双向传递吗？,javascript,wordpress,dom,web-applications,iframe,Javascript,Wordpress,Dom,Web Applications,Iframe,对于任何有专门知识的人来说，这都与WordPress的“主题定制器”有关，尽管这不是回答这个问题的必要条件 基本上，我有一个页面（在PHP中），其中包含一个左侧“窗格”，设置应用于iframe的内容，这是屏幕的右侧部分 从概念上讲，我希望使用draggable函数来调整主背景图像的CSS背景位置。我需要在customize.php页面上应用draggable（），将脚本排队，然后在iframe中操作DOM。这需要在容器/父级完成，因为该级有一个设置，它将更新X和Y坐标，并将它们保存在存储在其中的
背景位置。我需要在customize.php
页面上应用draggable（）
，将脚本排队，然后在iframe中操作DOM。这需要在容器/父级完成，因为该级有一个设置，它将更新X和Y坐标，并将它们保存在存储在其中的设置中
我认为我需要的可能是不可能的，但我想知道是否可以使用javascript同时执行以下两项操作：
获取iframe的内容
在iframe内操作DOM，通过draggable（）
调整背景图像，并将背景位置
坐标存储为数据属性，然后将其保存到相应的设置输入字段
根据我的经验，从“父/容器”级别在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>
指数
（函数（$，窗口，未定义）{
var-iframe；
//连接器对象将被传递到iframe，并将用作“API”
var parentConnector={
_window:window，//对父窗口的引用（不是必需的，但是很好）
$：$，//可以从iframe访问的对父jQuery的引用（请谨慎使用）
//在这里，您将为父级（您希望从iframe调用的函数）定义“API”
setElementValue:函数（选择器，值）{
$（选择器）.val（值）；
}
}
//iframe调用此函数以在父级中注册iframe
window.registerIFrame=函数（iframeheloper）{
//如果父级中有multible iframe，则可以在此处更改代码以将其存储在arrray或对象中的键中
iframe=iframeHelper；
//在iframe中注册父级
iframe.registerParent（parentConnector）；
}
$（文档）。在（“单击”，“滑动”，函数（事件）{
event.preventDefault（）；
/*
在helper对象上调用函数，这是提交的最节省的方式，因为
有一点是，它可以最大限度地降低混合不同环境的风险
*/
iframe.slideUp（）；
/*
这种方法至少可以在chrome中使用，当前版本使用jquery，但它会中继jquery实现
确保使用了正确的文档。
*/
iframe.$（“.info from parent”）.val（“slideUp”）；
/*
你永远不应该做的一件事是：
iframe.$（“.info from parent”）.append（$（“”）；
你不应该这样做的原因是因为这混合了不同背景的家庭元素。
这将在某些浏览器中导致意外的崩溃/异常（但在其他浏览器中可能会起作用，或者至少看起来会起作用）
*/
});
//和幻灯片一样，它只是为了有一些交互示例
$（文档）.on（“单击”、“.slideDown”，函数（事件）{
event.preventDefault（）；
iframe.slideDown（）；
iframe.$（“.info from parent”）.val（“slideDown”）；
});
})（jQuery，窗口）；
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>
iframe
（函数（$，窗口，未定义）{
//连接器对象将被传递给父对象，并将用作“API”
变量iframeConnector={
_window:window，//对iframes窗口的引用（虽然不是必需的，但是很好）
_父项：未定义，
$：$，//可以从父级访问的对iframes jQuery的引用（请谨慎使用）
//父级调用此函数以在iframe中注册父级
registerParent:函数（父级）{
这个。_parent=parent；
},
/*在这里，您将为iframe（您希望从父级调用的函数）定义“API”*/
slideUp:function（）{
$（“.test”）.slideUp（）；
},
slideDown:function（）{
$（“.test”）.slideDown（）；
},
setElementValue:函数（选择器，值）{
$（选择器）.val（值）；
}
};
//在父级中注册iframe
window.parent.registerFrame（iframeConnector）；
$（文档）.mousemove（函数（事件）{
//使用th