Question

功能：在文本字段中输入电话号码（例如：555-555-5555）。文本字段打印出数字（由CSS隐藏）。然后，Javascript按ID选取该数字，并用连字符将其拆分，并将数组拆分为FoneFinder URL搜索字符串，以便在弹出窗口中显示该网站的结果。

问题：弹出窗口工作正常，但是当我点击链接以生成链接时，它会在主页面和弹出窗口中打开。主页不应该改变。

弹出代码在其他页面上正常工作，并不会覆盖主页面。它必须是javascript如何将html链接注入到弄乱它的页面中，但我无法弄清楚原因。

任何帮助或见解都将不胜感激。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style>

#target_num_result {
    display: none;
}

#target_num_search {
    font-size: small;
}

</style>


<!-- NewWindow POP UP CODE -->
<script LANGUAGE="JavaScript">

  function NewWindow(mypage, myname, w, h, scroll) {
        var winl = (screen.width - w) / 2;
        var wint = (screen.height - h) / 2;
        winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
        win = window.open(mypage, myname, winprops)
        if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
  }

</script>


<!-- Script to read the target phone number and split it by hyphens and show a Search link to Fonefinder.net -->
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
    $('#target_num').on('keyup', function() {
        var my_value = $(this).val();
        $('#target_num_result').html(my_value);
        var arr = my_value.split('-');
        $("#target_num_search").html("&nbsp;&nbsp;<a href=http://www.fonefinder.net/findome.php?npa=" + arr[0] + "&nxx=" + arr[1] + "&thoublock=" + arr[2] + "&usaquerytype=Search+by+Number&cityname= title=FoneFinder onclick=NewWindow(this.href,'FoneFinderLookup','740','680','yes');>!BETA!FoneFinder Search!BETA!</a>");
    });

});//]]> 

</script>


</head>

<body>

<form id="form1" name="form1" method="post" action="">

<table cellpadding="2" cellspacing="0" style="width: 100%">
    <tr>
        <td style="width: 180px">Phone #:</td>
        <td><label> <input class="text" type="text" name="target_num" id="target_num" /></label><span id="target_num_result"></span><span id="target_num_search"></span></td>
    </tr>

    </table>
 <label>
 <input class="button" type="submit" name="submit" id="submit" value="Create" />
 </label>
</form>

</body>
</html>

Answer 1

您需要添加的内容如下：

$('#target_num_search').on('click', 'a', function (event) {
    event.preventDefault();

    var url = $(this).attr('href');

    NewWindow(url,'FoneFinderLookup','740','680','yes');
})

这样您就可以删除onclick属性并将函数调用移到js。查看工作jsfiddle

Answer 2

你应该return false阻止默认操作在onlick事件时链接'href'。

（请注意, - 任何函数返回的逗号运算符...这只是黑客。不要使用。）

BTW，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<style>

#target_num_result {
    display: none;
}

#target_num_search {
    font-size: small;
}

</style>


<!-- NewWindow POP UP CODE -->
<script LANGUAGE="JavaScript">

  function NewWindow(mypage, myname, w, h, scroll) {
        var winl = (screen.width - w) / 2;
        var wint = (screen.height - h) / 2;
        winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
        win = window.open(mypage, myname, winprops)
        if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
  }

</script>


<!-- Script to read the target phone number and split it by hyphens and show a Search link to Fonefinder.net -->
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
    $('#target_num').on('keyup', function() {
        var my_value = $(this).val();
        $('#target_num_result').html(my_value);
        var arr = my_value.split('-');
        var html_tpl = "&nbsp;&nbsp;<a href=http://www.fonefinder.net/findome.php?npa=" + arr[0] + "&nxx=" + arr[1] + "&thoublock=" + arr[2] + "&usaquerytype=Search+by+Number&cityname= title=FoneFinder onclick=\"return NewWindow(this.href,'FoneFinderLookup','740','680','yes'), false\" target='_blank'>!BETA!FoneFinder Search!BETA!</a>";
        $("#target_num_search").html(html_tpl);
    });

});//]]> 

</script>


</head>

<body>

<form id="form1" name="form1" method="post" action="">

<table cellpadding="2" cellspacing="0" style="width: 100%">
    <tr>
        <td style="width: 180px">Phone #:</td>
        <td><label> <input class="text" type="text" name="target_num" id="target_num" /></label><span id="target_num_result"></span><span id="target_num_search"></span></td>
    </tr>

    </table>
 <label>
 <input class="button" type="submit" name="submit" id="submit" value="Create" />
 </label>
</form>

</body>
</html>

弹出窗口正在工作，但也改变了主页面

2 个答案: