英文:
How to modify the query context when using a jQuery instance across iframes
问题
对于现有的 Web 应用程序1，我在跨 iframe 中使用了一个 jQuery 实例，这让我头痛不已。
jQuery 被加载（并别名为 $jq）在一个包含侧边栏 iframe 的文档中。在 iframe 文档中，我通过创建一个新的别名来重新使用父文档中的 jQuery，如 $jq = window.parent.$jq。
问题是现在，iframe 中进行的查询是指向父文档的，即 $jq("body").attr("id") 返回父文档的 body 的 id，而不是 iframe 文档的 body 的 id。因此，我需要使用上下文参数进行查询，如 $jq("body", document).attr("id")，以获取当前执行 jQuery 的文档的 id。
我的问题是：我是否可以采取任何措施，以便不必在每个单独的查询中都添加上下文参数，以将查询限定在当前文档中？例如，我是否可以全局设置 jQuery 的上下文？
父文档：
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<style>body{ margin: 0; padding: 0; font-family: sans-serif;} #page{ display: flex; } #main { padding: 10px; flex: 1 0 auto; } #sidebar{ width: 360px; background-color: #fafafa; border: 0; padding: 10px; height: calc(100vh - 20px); }</style>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$jq = jQuery;
</script>
</head>
<body id="Parent">
<div id="page">
<iframe id="sidebar" src="sidebar.html"></iframe>
<div id="main">
<h2>I am the parent</h2>
<code class="result"></code>
</div>
<script>
$('.result').html('$jq("body").attr("id"): <b>' + $jq("body").attr("id") + '</b>');
</script>
</div>
</body>
</html>
iframe 文档 (sidebar.html):
<!DOCTYPE html>
<html>
<head>
<title>Sidebar</title>
<style>body{font-family: sans-serif;}</style>
</head>
<body id="Sidebar">
<h2>I am the sidebar iFrame</h2>
<code class="result"></code>
<script>
var $jq = window.parent.$jq;
var theId = $jq("body").attr("id");
var theIdWithContext = $jq("body", document).attr("id");
var el = document.querySelector('code');
el.innerHTML += ('$jq("body").attr("id"): <b>' + theId + '</b><br><br>');
el.innerHTML += ('$jq("body", document).attr("id"): <b>' + theIdWithContext + '</b>');
</script>
</body>
</html>
这里是一个 测试案例，概述了我的问题。
1 其中使用了 jQuery，而替换它目前不在考虑范围内。
英文:
For an existing webapp<sup>1</sup>, i am using a jQuery instance across iframes which causes me headaches.
jQuery is loaded (and aliased to $jq) in a Document which contains an iFrame(for a sidebar). In the iFrame document, I reuse the jQuery from the parent document by creating a new alias in the iFrame like $jq = window.parent.$jq.
The problem is now, that queries made in the iFrame refer to the Parent-Document, i.e. $jq("body").attr("id") yields the id of the body of the parent document not the id of the body of the iframe-document, so I would have to query with the context parameter like $jq("body", document).attr("id") to get the id of the document jQuery is currently being executed in.
My Question is: can I do anything, so I would not have to add the context parameter to every single query in order to scope the queries to the current document? For example, can I set the context globally for jQuery or such?
Parent Document:
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<style>body{ margin: 0; padding: 0; font-family: sans-serif;} #page{ display: flex; } #main { padding: 10px; flex: 1 0 auto; } #sidebar{ width: 360px; background-color: #fafafa; border: 0; padding: 10px; height: calc(100vh - 20px); } </style>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$jq = jQuery;
</script>
</head>
<body id="Parent">
<div id="page">
<iframe id="sidebar" src="sidebar.html"></iframe>
<div id="main">
<h2>I am the parent</h2>
<code class="result"></code>
</main>
</div>
<script>
$('.result').html('$jq("body").attr("id"): <b>' + $jq("body").attr("id") + '</b>');
</script>
</body>
</html>
iFrame Document (sidebar.html):
<!DOCTYPE html>
<html>
<head>
<title>Sidebar</title>
<style>body{font-family: sans-serif;}</style>
</head>
<body id="Sidebar">
<h2>I am the sidebar iFrame</h2>
<code class="result"></code>
<script>
var $jq = window.parent.$jq;
var theId = $jq("body").attr("id");
var theIdithContext = $jq("body", document).attr("id");
var el = document.querySelector('code');
el.innerHTML +=('$jq("body").attr("id"): <b>' + theId + '</b><br><br>');
el.innerHTML +=('$jq("body", document).attr("id"): <b>' + theIdithContext + '</b>');
</script>
</body>
</html>
And here a testcase outlining my problem.
<hr>
<sup>1</sup> which happens to use jQuery and replacing that is out of scope for now
答案1
得分: 1
在sidebar.html中创建一个在你需要的上下文中运行的函数。同时，你也可以不分配$jq = jQuery;。
在下面的代码中，jQuery将具有父文档上下文，而$将具有iFrame文档上下文。你可以为这些变量分配任何名称。
const jQuery = window.parent.$;
const $ = (selector) => jQuery(selector, document);
Object.setPrototypeOf( $, jQuery );
父文档：
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<style>body{ margin: 0; padding: 0; font-family: sans-serif;} #page{ display: flex; }</style>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body id="Parent">
<div id="page">
<iframe id="sidebar" src="sidebar.html"></iframe>
<div id="main">
<h2>I am the parent</h2>
<code class="result"></code>
</div>
</div>
<script>$('.result').html(`bodyID: <b>${$('body').attr('id')}</b>`);</script>
</body>
</html>
iFrame文档：
<!DOCTYPE html>
<html>
<head>
<title>Sidebar</title>
<style>body{font-family: sans-serif;}</style>
</head>
<body id="Sidebar">
<h2>I am the sidebar iFrame</h2>
<code class="result"></code>
<script>
const jQuery = window.parent.$;
const $ = (selector) => jQuery(selector, document);
Object.setPrototypeOf( $, jQuery );
const bodyID = $('body').attr('id');
const parentBodyID = jQuery('body').attr('id');
const el = document.querySelector('code');
$('code').html(`bodyID: <b>${bodyID}</b><br>parentBodyID: <b>${parentBodyID}</b>`);
</script>
</body>
</html>
英文:
Just create a function in sidebar.html that will work in the context you need.
And you can also not assign $jq = jQuery;.
In the code below, jQuery will have a Parent Document context and $ will have an iFrame Document context. (You can assign any names to the variables).
const jQuery = window.parent.$;
const $ = (selector) => jQuery(selector, document);
Object.setPrototypeOf( $, jQuery );
Parent Document:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<style>body{ margin: 0; padding: 0; font-family: sans-serif;} #page{ display: flex; }</style>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body id="Parent">
<div id="page">
<iframe id="sidebar" src="sidebar.html"></iframe>
<div id="main">
<h2>I am the parent</h2>
<code class="result"></code>
</div>
</div>
<script>$('.result').html(`bodyID: <b>${$('body').attr('id')}</b>`);</script>
</body>
</html>
<!-- end snippet -->
iFrame Document:
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<title>Sidebar</title>
<style>body{font-family: sans-serif;}</style>
</head>
<body id="Sidebar">
<h2>I am the sidebar iFrame</h2>
<code class="result"></code>
<script>
const jQuery = window.parent.$;
const $ = (selector) => jQuery(selector, document);
Object.setPrototypeOf( $, jQuery );
const bodyID = $('body').attr('id');
const parentBodyID = jQuery('body').attr('id');
const el = document.querySelector('code');
$('code').html(`bodyID: <b>${bodyID}</b><br>parentBodyID: <b>${parentBodyID}</b>`);
</script>
</body>
</html>
<!-- end snippet -->
答案2
得分: 1
简短回答：这是不可能的，较长回答：这是不需要的。
我认为整个问题被过度设计，过于追求完美和DRY原则。你可以轻松地重用父级的jQuery对象来获取你的侧边栏的主体并与之交互：
const $body = window.parent.$(document.body);
但是为什么需要在iframe中包含你的脚本呢？这也似乎是不必要的。你可以轻松地从父级操作你的iframe：
const $iframeBody = $($('iframe')[0].contentDocument.body);
$iframeBody.append("<div>added by parent</div>");
此外，我认为在所有地方使用$(selector) 作为jQuery代码质量较低，因为它缺乏容器上下文。
回到问题本身。
首先，如果你查看jQuery的压缩代码，你会发现它是一个硬对象，这意味着窗口和文档成为脚本执行时定义的私有作用域变量：
/*! jQuery v3.3.1 | (c) JS Foundation and other contributors | jquery.org/license */
// ...
所以你不能像改变原型那样来改变窗口和文档。
其次，要为你的iframe创建一个jQuery对象，你只需要在你的iframe中再次执行这个脚本。所以将jQuery放入你的iframe的最简单方法如下：
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
现代浏览器足够聪明，不会重复下载脚本。因此，你在父页面和iframe中都有了相同的jQuery，只需要一个源代码文件。基本上，浏览器只下载一次jQuery的源代码，然后为父页面和iframe页面创建单独的jQuery对象。
我认为这非常简单，不需要更复杂的解决方案。
你可以在这里查看代码示例：
https://codesandbox.io/s/silly-ardinghelli-v7774q?file=/src/frame.js
在iframe的JS中，我可以轻松地同时使用父级的jQuery和iframe的jQuery：
$jp = window.parent.jQuery;
$(() => {
$("body").append("<div>added by iframe</div>");
$jp("body").append("<div>added by iframe</div>");
});
结果：
英文:
A short answer: it's impossible, a longer answer: it's not needed.
I think the whole problem is overengineered, too much perfection & DRY. you can easily reuse the parent's jQuery object to get your sidebar's body and work with it:
const $body = window.parent.$(document.body);
But why you need to include your script in the iframe? Also seems unnecessary. You can easily manipulate your iframe from the parent:
const $iframeBody = $($('iframe')[0].contentDocument.body);
$iframeBody.append("<div>added by parent</div>");
Also I consider using $(selector) everywhere as low quality jQuery spaghetti code since it's lacking any container context.
Back to the problem.
First if you look at jQuery's minified code you'll find it's a hard object which means the window & document become private scope variables defined at the script execution:
/*! jQuery v3.3.1 | (c) JS Foundation and other contributors | jquery.org/license */
!function(e, t) {
"use strict";
"object" == typeof module && "object" == typeof module.exports ? module.exports = e.document ? t(e, !0) : function(e) {
if (!e.document)
throw new Error("jQuery requires a window with a document");
return t(e)
}
: t(e)
}("undefined" != typeof window ? window : this, function(e, t) {
"use strict";
var n = []
, r = e.document
, i = Object.getPrototypeOf
, o = n.slice
, a = n.concat
, s = n.push
, u = n.indexOf
, l = {}
, c = l.toString
, f = l.hasOwnProperty
, p = f.toString
, d = p.call(Object)
, h = {}
So you can't change something like prototype to change window & document.
Second to create a jQuery object for your iframe you just need to execute this script again in your iframe. So the easiest why to put jQuery into your frame:
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
Modern browsers are smart enough not to download the script twice.
So you have your jQuery in the parent page and in the iframe with one source code file. Basically the browser download the jQuery's source once than creates individual jQuery objects for your parent and iframe pages.
I think it's really easy and doesn't require any smarter solution.
The gist could be seen here:
https://codesandbox.io/s/silly-ardinghelli-v7774q?file=/src/frame.js
In the iframe's JS I just easily can use both the parent's jQuery and the iframe's one:
$jp = window.parent.jQuery;
$(() => {
$("body").append("<div>added by iframe</div>");
$jp("body").append("<div>added by iframe</div>");
});
The result:
答案3
得分: 0
您可以将$jq定义为一个以selector作为属性并调用window.parent.$jq(selector, document)的function：
var $jq = function(selector) {
return window.parent.$jq(selector, document);
};
完整的iframe代码：
<!DOCTYPE html>
<html>
<head>
<title>Sidebar</title>
<style>body{font-family: sans-serif;}</style>
</head>
<body id="Sidebar">
<h2>I am the sidebar iFrame</h2>
<code class="result"></code>
<script>
var $jq = function(selector) {
return window.parent.$jq(selector, document);
};
var theId = $jq("body").attr("id");
var theIdithContext = $jq("body", document).attr("id");
var el = document.querySelector('code');
el.innerHTML +=('$jq("body").attr("id"): <b>' + theId + '</b><br><br>');
el.innerHTML +=('$jq("body", document).attr("id"): <b>' + theIdithContext + '</b>');
</script>
</body>
</html>
成功的测试：
英文:
You can define $jq as being a function that takes a selector as an attribute and calls window.parent.$jq(selector, document):
var $jq = function(selector) {
return window.parent.$jq(selector, document);
};
Full iframe code:
<!DOCTYPE html>
<html>
<head>
<title>Sidebar</title>
<style>body{font-family: sans-serif;}</style>
</head>
<body id="Sidebar">
<h2>I am the sidebar iFrame</h2>
<code class="result"></code>
<script>
var $jq = function(selector) {
return window.parent.$jq(selector, document);
};
var theId = $jq("body").attr("id");
var theIdithContext = $jq("body", document).attr("id");
var el = document.querySelector('code');
el.innerHTML +=('$jq("body").attr("id"): <b>' + theId + '</b><br><br>');
el.innerHTML +=('$jq("body", document).attr("id"): <b>' + theIdithContext + '</b>');
</script>
</body>
</html>
Successful test:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论