如何在iframe子页面中调用父页面div并将其展示在kendoWindow弹窗内

错误原因 #

• 子页面直接使用$("#userinfo")选择器只会检索子页面自身的DOM，无法匹配到父页面的元素
• 要访问父页面DOM需通过window.parent对象操作，且父子页面必须满足同源策略（协议、域名、端口完全一致），否则浏览器会拦截跨域访问请求
• 原代码存在语法错误：content($("#userinfo")).html()的括号配对错误，html()方法被放在content方法外部，无法正确给弹窗设置内容

修复后代码 #

父页面 parent.html #

<iframe src="grid-listing.html"></iframe>
<div id='userinfo'>Name:Ali</div>

子页面 grid-listing.html #

$(document).ready(function () {
    // 从父页面获取#userinfo的内容
    const userInfoContent = $(window.parent.document).find('#userinfo').html();
    const userWindow = $('<div />').kendoWindow({
        title: "Edit user info",
        resizable: false,
        modal: true,
        width: 1000,
        draggable: false,
        close: function () {
            this.destroy();
        }
    }).data('kendoWindow').content(userInfoContent);
    // 调用open方法显示弹窗
    userWindow.open();
});

可选优化 #

如果需要完整复制父页面#userinfo元素（包括绑定的事件、样式类），可以使用clone方法：

// 参数true表示同时复制元素绑定的事件
const clonedUserInfo = $(window.parent.document).find('#userinfo').clone(true);
const userWindow = $('<div />').kendoWindow({
    // 配置项同上
}).data('kendoWindow').content(clonedUserInfo);
userWindow.open();

内容的提问来源于stack exchange，提问作者No Imo