单击锚元素后执行操作答案

【问题标题】：Perform actions once anchor element is clicked单击锚元素后执行操作
【发布时间】：2015-11-14 19:06:05
【问题描述】：

我正在让一个网页在占据整个屏幕的 iframe 中加载另一个网页。我有 2 个 div 彼此重叠。这些 div 实际上是指向新 url（动作）的锚点。我想要做的是，一旦单击任何 div，就会启动一个 onclick 事件，该事件将转到该锚 href 中指定的 url，然后重新加载初始 index.html 页面。我的班级正在研究当地环境，教我们一种叫做点击劫持的东西。以下是我当前的 html。

我遇到的问题是我可以让锚点点击转到我想要的 url，但是我不再在我的 index.html 中。是否可以在新窗口中打开引用的链接，加载后关闭新窗口，然后刷新 index.html 页面。一旦完成隐藏被点击的 div，因为“第二个”div 隐藏在最顶部的可点击 div 后面。

<html> 
<head>
</head>
<body>
    <center>
<!-- Two anchor divs that are clickable and on top of each other -->  
        <div id="secondDiv">
            <a href="http://www.2ndURL.com" id="m2">
                <div id="2" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
                    <iframe>
                    </iframe>
                </div>
            </a>
        </div>
        <div id="firstDiv">
            <a href="#" id="m1" onclick="myFunction(); return false;">
                <div id="1" style="position:absolute;top:195px;left:10px;width:10000px;height:200px;">
                    <iframe>
                    </iframe>
                </div>
            </a>
<!-- Main iFrame where user interacts -->
        </div>
        <iframe id="new" src="http://www.mywebpage.com" style="opacity:1.0;width:100%;height:100%;">
        </iframe> 
    </center> 
</body> 
<script>
function myFunction(){
    var newWindow = window.open("http://www.actionURL");
    newWindow.close()
    var myWindow = window.open("file:///home/seed/Desktop/index.html", "_self");

}
</script>
</script>
</html>

TLDR：

在网页中加载 iframe
点击指向新网址的页面上的锚 div
加载该网址，加载后返回 index.html（全部在一个选项卡中）（步骤 1）
隐藏选择的锚 div -- 允许第二个锚已点击

感谢您的帮助。

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

如果您想在您所在的页面上进行 onclick 操作，您可能需要“伪造”onclick。您将需要修改参数，但这是我使用的代码：

    $(function() {
    // find out what our query parameters contain.
    var query = location.search;

    // isolate the position of the equal sign.
    var equalIndex = query.indexOf('=');
    // extract the image's id.
    var imageId = query.substring(equalIndex + 1);

    // click on the appropriate image.
    $('#' + imageId).click();
    });

cmets 解释了代码的每个步骤执行的操作。就我而言，我需要加载页面，然后使用唯一的图像 ID 强制点击。在您的情况下，您需要将其绑定到您的唯一 div。我希望这可以帮助您入门。

【讨论】：

不确定我是否关注。用户（我自己）将单击锚 div 所在的区域（清除框）。我可以让它点击并运行一个动作，但唯一的问题是它加载了实际的 url。我需要它来加载一个包含参数的 url（提交更改），然后重新加载 index.html 以将 ui 更新给用户，并且仍然允许隐藏的可点击框处于活动状态（因此用户最终会为我执行操作再次）。请记住，我是模拟点击劫持尝试的用户。
我理解的方式是用户执行初始单击以运行一个操作，但您需要它执行第二个操作（提交更改）并重新加载 index.html 页面。我的想法是，在用户进行初始点击后，您可以执行第二个 .click() 以完成第二个操作并重新加载 index.html。在用户单击菜单项后，我正在使用 .click() 执行打开隐藏 div 的第二个操作。我认为这些过程是平行的，它可能对你有用。