在外部窗口中从弹出窗口打开链接,然后关闭原始弹出窗口

问题描述:

我有一个需要从父窗口打开弹出窗口的要求.我能够成功做到这一点.

I have a requirement in which I need to open a popup window from the parent window. I am able to do that successfully.

现在我要做的是-假设一个弹出窗口已打开,并且该弹出窗口中有一些链接,如果我尝试单击该链接,它将在新窗口和原始弹出窗口中打开该链接应该关闭.

Now what I am trying to do is- Suppose a popup window is open and there is some link in that popup window and If I try to click that link, it should open that link in a new window and the original popup window should get closed.

这是我的小提琴.在这个小提琴中,如果您单击应用"按钮,它将打开一个正常工作的弹出窗口,但是如果您单击该弹出窗口中的任何链接,则该链接会在同一弹出窗口中打开,这是我所不希望的.我想在新的外部窗口中打开该链接,并且原来的弹出窗口应该关闭.

This is the fiddle I have. In this fiddle if you click on apply button then it will open a popup window which is working fine but if you click on any link in that popup window then that link gets opened in the same popup window which is what I don't want. I want to open that link in a new external window and that original popup window should get closed.

下面是JS代码-

function open(url) {
    $('#blockdiv').fadeIn();
    $('#iframe').attr('src', url);
    $('#containerdiv').fadeIn();   
}

function close() {  
    $('#blockdiv').fadeOut();
    $('#containerdiv').fadeOut();  
}

$(document).ready(function() {
  $('ul').css({width: $('#containerdiv').width(),height:    $('#containerdiv').height()})
     $('#close').click( function() { close() })
     $('.JN_apply').click( function() { open($(this).data('url')); })

});

我在小提琴中给出的示例将打开www.ebay.com网站,但总的来说,这将是我的页面,将其作为弹出"窗口打开.

The example that I have given in the fiddle will open www.ebay.com website but in general it will be my page that will get opened as the Popup window.

有可能吗?如果是,有人可以帮我吗?

Is it possible to do? If yes, can anybody help me with that?

更新的代码:-

现在我已经开始使用jQuery colorbox进行上述操作-

Now I have started using jQuery colorbox to do the same above thing-

下面是我的父窗口代码,它将打开弹出窗口-

Below is my parent window code that will open the popup window-

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Colorbox Examples</title>
        <style>
            body{font:12px/1.2 Verdana, sans-serif; padding:0 10px;}
            a:link, a:visited{text-decoration:none; color:#416CE5; border-bottom:1px solid #416CE5;}
            h2{font-size:13px; margin:15px 0 0 0;}
        </style>
        <link rel="stylesheet" href="C:\Users\rj\Downloads\colorbox-master\example4\colorbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="C:\Users\rj\Downloads\colorbox-master\jquery.colorbox.js"></script>
        <script>
            $(document).ready(function(){
                //Examples of how to assign the Colorbox event to elements
                $(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});

            });
        </script>
    </head>
    <body>
        <h2>Other Content Types</h2>
        <p><a class='iframe' href="http://www.wikipedia.com">Outside Webpage (Iframe)</a></p>

        </body>
</html>

下面是我的弹出窗口代码,其中有一个链接,我需要通过关闭原始弹出窗口在新的外部窗口中打开链接-

And below is my popup window code which will have one link that I need to open in a new external window by closing the original popup window-

<html>
<head>
  <title>Apply</title>
</head>
<body>

<script>
function getUrlParameters() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, 
        function(m,key,value) {
            vars[key] = value;
        });
    return vars;
}
var id = getUrlParameters()["ID"];    
var title = getUrlParameters()["Title"];    
var id = unescape(id);
var title = unescape(title);

var myJScript = document.createElement('script');

myJScript.setAttribute('type', 'Apply');
myJScript.setAttribute('data-companyId', '40');
myJScript.setAttribute('data-jobTitle', id );
myJScript.setAttribute('data-email', 'admin@domain.net');

document.body.appendChild(myJScript); 
</script>
<hr>

<input name="Apply Online" type="button" id="Apply Online" value="Apply Online" ONCLICK="window.location.href='some_url'">

</body>
</html>

现在如何在这种情况下单击在线申请"链接并且应该在新的外部窗口中打开在线申请"链接后关闭弹出窗口?我希望这个问题应该足够清楚.

Now how to close the popup window in this case after clicking Apply Online link and Apply Online link should get opened in a new external window? I hope the question should be clear enough.

尝试

<input name="Apply Online" type="button" id="Apply Online" value="Apply Online" ONCLICK="window.location.href='some_url';$.colorbox.close();">

<input name="Apply Online" type="button" id="Apply Online" value="Apply Online" ONCLICK="window.location.href='some_url';parent.$.colorbox.close();">