a画面是x的子画面,我在a画面点击打开按钮打开b画面(b画面是弹出框的形式),如何实现在b画面点击跳转按钮,让a的父画面x跳转到其他画面。(开发是基于sales force的Apex语言,兼容大部分HTML)
基于new bing的实现,看下是否符合
在a画面中通过 let bWindow 定义了一个变量来保存b窗口的引用,在 openB() 函数中打开b窗口,并为其绑定了 unload 事件处理程序,在该处理程序中清除了 bWindow 的引用。
在b画面中,直接在跳转按钮的 onclick 事件处理程序中调用了 window.opener.location.href 来跳转到目标页面。注意,在使用 window.opener 时需要先检查其是否存在且未被关闭过,以避免可能引发的 JavaScript 错误。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A画面</title>
</head>
<body>
<h1>A画面</h1>
<button id="openBtn" onclick="openB()">打开B画面</button>
<script>
let bWindow;
function openB() {
bWindow = window.open("b.html", "B画面", "width=400,height=300");
bWindow.addEventListener("unload", function() {
bWindow = null;
});
}
</script>
</body>
</html>
b.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>B画面</title>
</head>
<body>
<h1>B画面</h1>
<p>点击下面的按钮跳转到其他页面:</p>
<button id="jumpBtn" onclick="jumpToOtherPage()">跳转</button>
<script>
function jumpToOtherPage() {
if (window.opener && !window.opener.closed) {
window.opener.location.href = "https://www.baidu.com/";
}
}
</script>
</body>
</html>
您想用vue 实现还是 原生js 还是jq
以下是可能的实现方式。
在 a.html 页面中,你需要添加一个按钮来打开 b.html 的弹窗。具体代码如下:
<!-- a.html -->
<button onclick="openPopup()">打开弹窗</button>
<!-- 在这里引入 b.html 弹窗的代码 -->
<script src="b.js"></script>
b.html 是以弹窗的形式呈现的页面,可以使用 JavaScript 和 HTML 来创建和定制弹窗。在 b.html 中,你需要添加一个按钮来触发 a.html 页面的跳转。具体代码如下:
<!-- b.html -->
<button onclick="redirectToPage()">跳转至其他页面</button>
<!-- JavaScript 代码 -->
<script>
function redirectToPage() {
// 跳转到其他页面的 URL
var url = "https://www.example.com";
// 在当前 tab 中打开新的 URL
window.location.href = url;
}
</script>
最后,在 a.html 页面中,你需要添加 openPopup() 函数来打开 b.html 弹窗,并在关闭弹窗时进行相应的处理。具体代码如下:
<!-- a.html -->
<script>
function openPopup() {
// 打开弹窗并保存它的句柄
var popup = window.open("b.html", "_blank", "width=500,height=500");
// 在弹窗关闭时执行相应的逻辑
popup.onbeforeunload = function() {
// 在弹窗中点击跳转按钮后,弹窗将会关闭,
// 此时通过 window.parent 可以获取到父窗口的对象,
// 通过它可以实现跳转至其他页面。
window.parent.location.href = "https://www.example.com";
};
}
</script>
上述代码中,我们使用 window.open
打开了一个宽度和高度均为 500 像素的弹窗,并保存了它的句柄。在弹窗关闭时,我们定义了一个 onbeforeunload
回调函数,这个函数可以在弹窗关闭前进行一些操作,比如跳转到其他页面。在这里,我们通过 window.parent
获取到了父窗口的对象,并调用其 location.href
属性来实现跳转。
具体实现取决于你现在使用的编程语言和技术栈
建议是在b画面的跳转按钮中添加一个点击事件监听器。在点击事件监听器中,使用JavaScript或其他编程语言编写代码,打开a画面。
我简单写了下,可以这样来:
A页面中打开B页面:
<!-- A页面 -->
<a href="#" onclick="openBPage()">打开B页面</a>
<script type="text/javascript">
function openBPage() {
window.open('/apex/BPage');
}
</script>
B页面中跳转到C页面:
<!-- B页面 -->
<a href="#" onclick="gotoCPage()">跳转到C页面</a>
<script type="text/javascript">
function gotoCPage() {
window.location.href = '/apex/CPage';
}
</script>
在A页面中,我们使用 window.open
打开B页面的 URL ,它会在一个新的浏览器窗口中打开B页面。在B页面中,我们使用 window.location.href
将页面跳转到新的C页面。
注意,要使这种跨页面跳转正常工作,必须确保在Salesforce中A、B和C页面都已经被正确定义,并且用户具有正确的对象和字段权限。另外,如果在B页面中直接调用 window.open
再打开C页面,用户可能需要在新的浏览器窗口中重新登录一次。这种情况下,可以在A、B和C页面中使用合适的身份验证控件或 cookie 来让用户在所有页面上进行身份验证。
第一个页面
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<SCRIPT LANGUAGE="JavaScript">
function test(){
var s = document.getElementById("txt");
location.href="test2.html?"+"txt="+encodeURI(s.value);
}
</SCRIPT>
<body>
<input type="text" id="txt">
</br>
<input type="button" value="TEST" onclick="test()"/>
</body>
</html>
html
<button onclick="redirectToOtherPage()">跳转到其他画面</button>
function redirectToOtherPage() {
window.opener.location.href = 'https://www.example.com/otherpage'; // 跳转到其他画面的URL
window.close(); // 关闭b画面
}
var aPageUrl = window.location.href; // 获取a画面的URL
window.open('b画面的URL?apage=' + encodeURIComponent(aPageUrl), '_blank', 'height=400,width=600'); // 打开b画
面,并将a画面的URL传递给b画面
4. 在b画面中获取a画面的URL,并将其保存在一个变量中。例如:
var aPageUrl = decodeURIComponent(window.location.search.substring(1).split('=')[1]); // 获取a画面的URL
5. 在b画面中添加一个关闭按钮,并在按钮的点击事件中使用JavaScript代码实现关闭b画面并返回a画面。例如:
function closeBPage() {
window.opener.location.href = aPageUrl; // 返回a画面
window.close(); // 关闭b画面
}
综上所述,通过以上步骤可以实现在b画面中点击跳转按钮,让a画面跳转到其他画面的功能。