Question

我正在尝试以模态方式打开外部网址。该外部位置使用户能够输入付款。用户成功付款后，应将用户定向回我正在处理的网站。为了实现这一点，我目前正在将iframe设计为模态窗口。当用户点击“下一步”按钮时，表单操作会将外部网址发布到我的iframe。然后，css创建类似模态的效果，以防止用户点击前一屏幕上的按钮，直到输入付款。外部网址需要返回网址和取消网址作为输入参数。当用户完成网站后，他们将点击提交或取消，外部网站将导航用户到适当的位置。我遇到的问题是当用户点击外部网站上的取消或提交时，模态窗口仍然打开并导航到新位置。我想要发生的是关闭模式窗口，并将用户导航到主浏览器中的必要URL。有没有人知道如何完成这个或编码这个可以避免这个问题的方法？谢谢！

代码：

<style>
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: -60;
    right: 0;
    bottom: 0;
    left: 0;
    background: #EAC5C5;
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalDialog > div {
    width: 850px;
    height: 700px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    background: #fff;
}

.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }

</style>
<script type="text/javascript">
    function openModal() {
        window.location.assign("#openModal")
    }

    function cancelUrl() {
        window.location.assign("#close")
    }

</script>
<body>

    <form action="https://hostedpage" target="my-iframe" method="post" id="testForm" runat="server">
    <label for "Hidden4">Amount: </label>
    <input type="text" name="Amount" id="Hidden4" value="" />
    <input type="hidden" name="RURL" id="Hidden7" value="https://testurl.com" />
    <input type="hidden" name="CURL" id="Hidden8" value="http://testurl2.aspx#close" />
    <asp:Button ID="Submit" runat="server" Text="Next" UseSubmitBehavior="true" OnClientClick="openModal()" />
    </form>

    <div id="openModal" class="modalDialog" >
        <div id="div1">
                <a href="#close" title="Close" class="close">X</a>
                <iframe id="iframe" name="my-iframe" style="width: 850px; height: 700px;" frameborder="0" ></iframe>
        </div>
    </div>

</body>

Answer 1

所以代码比我第一次提出这个问题时更复杂，但整体想法仍然存在。因此，我将RURL更改为“testurl.com＆amp; type = submit”，将CURL更改为“testurl2.aspx＆amp; type = cancel”。我正在使用c＃.net，在Page_Load函数中，我正在检测type参数是否存在。如果是，我将iframe更改为其他视图。此视图只有两个隐藏按钮和一个隐藏字符串（我想将此信息传递给父级。该值在Page_Load函数中设置。）

<asp:View ID="newView" runat="server" >
    <form id="frm" runat="server" style="display:none">
        <asp:TextBox ID="Label25" runat="server" CssClass="NoDisplay" />
        <input type="button" id="hiddenButton" onclick="parent.submit(this.form.Label25.value);" style="display:none" />
        <input type="button" id="hiddenCancel" onclick="parent.cancel();" style="display:none" />
    </form>
</asp:View>

即使iframe是一个不同的视图，它仍然会经历加载页面的所有动作。我捕获页面加载并确定类型参数是否在url中。如果是，我单击视图上的其中一个按钮。这会触发提交或取消模态窗口的父函数。我知道这似乎有点迂回，但必须是因为用户点击关闭模式的按钮位于托管网站上。此外，这样做可以让我在这个过程中做更复杂的事情，比如从托管网站捕获响应并将其扔进我们的数据库。

<script type="text/javascript">
function testFunction() {
            var urlParms = new Array();
            urlParms = document.URL;.split("?");
            if (typeof thisNVP[1] !== "undefined") {
                var parmArray = urlParms[1].split("&"); 
                var thisfrag = new Array();
                for (i = 0; i < parmArray.length; i++) {
                    thisfrag = parmArray[i].split("=");
                    if (thisfrag[0] == "type") {
                        if(thisfrag[1] == "cancel") {
                            document.getElementById("hiddenCancel").click();
                        } else {
                            document.getElementById("hiddenButton").click();
                        }
                    }
                }
            }
        }
</script>
<body onload="testFunction()">
</body>

模态外部URL不正确地重定向

1 个答案: