0

我想单击 iframe 并使用 jQuery UI 在新选项卡中打开链接，但它不起作用，并且新链接在同一选项卡中打开。但是，如果我单击 iframe 之外的屏幕上的任何点，则会创建新选项卡。

如果有人知道帮助我，我将不胜感激

问候， 克里斯蒂安

主页

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <style>
        #tabs { margin-top: 1em; }
        #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
        #add_tab { cursor: pointer; }
    </style>        

    <script type="text/javascript">
        $(function () {
            $('.dock').find("a").click(function(event) {
                event.preventDefault();
                var name = $(event.currentTarget).text(), 
                    url  = $(event.currentTarget).attr("href");
                createNewTab(name, url, 5, true);
                return false;
            });

            $(this).click(function(e){  
                $('iframe').contents().find("a").click(function(event){ 
                    event.preventDefault();
                    var name = $(event.currentTarget).text(), 
                        url  = $(event.currentTarget).attr("href");
                    createNewTab(name, url, 5, true);
                    return false; 
                });
            });

            tabs = $("#tabs").tabs();
            tabCounter = 1;         

            function selectNewTab() {
                $('#tabs').tabs('option', 'active', -1);
            }
            function addTab(name, url) {
                tabCounter++;
                var tabTemplate = "<li><a href='#{href}'>#{label}</a><span class='ui-icon ui-icon-close' role='presentation'>Remover Tab</span></li>";
                var id = "tabs-" + tabCounter,
                    li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, name)),
                    tabContentHtml = '<iframe id="ifr" class="tabs-iframe" src="' + url + '" width="100%" height="400" scrolling="auto" frameborder="no" align="center"></iframe>';
                tabs.find(".ui-tabs-nav").append(li);
                tabs.append("<div id='" + id + "'>" + tabContentHtml + "</div>");
                tabs.tabs("refresh");
            }
            function createNewTab(name, url, size, checkTabExists) {
                addTab(name, url);
                selectNewTab();
            }           
        });
    </script>       
</head>
<body>
    <div class="content">
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">First Tab</a></li>
            </ul>
            <div id="tabs-1">
                <p>Tab 1</p>
            </div>
        </div>
    </div>
    <div class="dock">
        <a href="another-page.html">New Tab</a>
    </div>
</body>
</html>

另一个页面

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<head>
</head>
<body>
    <div>
        <a href="http://www.microsoft.com">Click Here</a>
    </div>
</body>
</html>
4

2 回答 2

1

@ChristianB 您在创建 iFrame 时没有将 click 事件附加到 iFrame，而是在尝试将 click 事件附加到现有 iFrame。我试图更改您的函数 addTab 中的代码；

我已将 id 属性附加到您的 iFrame，因此一旦创建 iFrame，我就可以将 click 事件附加到 iFrame 文档。

尝试这个：

        function addTab(name, url) {
            tabCounter++;
            var tabTemplate = "<li><a href='#{href}'>#{label}</a><span class='ui-icon ui-icon-close' role='presentation'>Remover Tab</span></li>";
            var id = "tabs-" + tabCounter,
                li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, name)),
                tabContentHtml = '<iframe id="ifr' + tabCounter + '" class="tabs-iframe" src="' + url + '" width="100%" height="400" scrolling="auto" frameborder="no" align="center"></iframe>';
            tabs.find(".ui-tabs-nav").append(li);
            tabs.append("<div id='" + id + "'>" + tabContentHtml + "</div>");
            tabs.tabs("refresh");

            //Add the Link Click to newly created iFrame

            $('#ifr'+tabCounter).ready(function(e) {
              /* This does not work with chrome
              $('#ifr'+tabCounter).contents().find("a").bind('click', function(event){ 
              */
              //Below throws an exception in chrome, but still works
              $('#ifr'+tabCounter.contentWindow.document.body).find(a).bind('click', function(event){ 
                  //event.preventDefault();
                  var name = $(event.currentTarget).text(); 
                  var url  = $(event.currentTarget).attr("href");
                  createNewTab(name, url, 5, true);
                  return false; 
              });
            });
        }
于 2013-04-28T02:23:04.217 回答
0

谢谢莫希特帕达利亚。你帮了我很多。我尝试使用您的代码，但没有奏效。我相信它对你有用，因为函数 selectNewTab(​​) 不起作用。在这种情况下，我添加了一个策略来强制选择创建的新选项卡。请注意，在运行新选项卡下方的代码时，选择了新选项卡并单击“点击此处”，新链接将在同一选项卡中打开。但是，如果您单击 iframe 之外的屏幕上的任意位置，然后单击将起作用的链接，则会创建新选项卡。

亲切的问候，

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
    <style>
        #tabs { margin-top: 1em; }
        #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
        #add_tab { cursor: pointer; }
    </style>        

    <script type="text/javascript">
        $(function () {
            $('.dock').find("a").click(function(event) {
                event.preventDefault();
                var name = $(event.currentTarget).text(), 
                    url  = $(event.currentTarget).attr("href");
                createNewTab(name, url, 5, true);
                return false;
            });

            $(this).click(function(e){  
                $('iframe').contents().find("a").click(function(event){ 
                    event.preventDefault();
                    var name = $(event.currentTarget).text(), 
                        url  = $(event.currentTarget).attr("href");
                    createNewTab(name, url, 5, true);
                    return false; 
                });
            });

            tabs = $("#tabs").tabs();
            tabCounter = 1;         

            function selectNewTab() {
                $('#tabs').tabs('option', 'active', -1);
            }
            function addTab(name, url) {
                tabCounter++;
                var tabTemplate = "<li><a href='#{href}'>#{label}</a><span class='ui-icon ui-icon-close' role='presentation'>Remover Tab</span></li>";
                var id = "tabs-" + tabCounter,
                    li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, name)),
                    tabContentHtml = '<iframe id="ifr' + tabCounter + '" class="tabs-iframe" src="' + url + '" width="100%" height="400" scrolling="auto" frameborder="no" align="center"></iframe>';
                tabs.find(".ui-tabs-nav").append(li);
                tabs.append("<div id='" + id + "'>" + tabContentHtml + "</div>");
                tabs.tabs("refresh");

                //Add force select new tab 
                tabs.tabs('option', 'active', -1);

                //Add the Link Click to newly created iFrame

                $('#ifr'+tabCounter).ready(function(e) {
                  /* This does not work with chrome
                  $('#ifr'+tabCounter).contents().find("a").bind('click', function(event){ 
                  */
                  //Below throws an exception in chrome, but still works
                  $('#ifr'+tabCounter.contentWindow.document.body).find(a).bind('click', function(event){ 
                      //event.preventDefault();
                      var name = $(event.currentTarget).text(); 
                      var url  = $(event.currentTarget).attr("href");
                      createNewTab(name, url, 5, true);
                      return false; 
                  });
                });
            }

            function createNewTab(name, url, size, checkTabExists) {
                addTab(name, url);
                //selectNewTab();
            }           
        });
    </script>       
</head>
<body>
    <div class="content">
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">First Tab</a></li>
            </ul>
            <div id="tabs-1">
                <p>Tab 1</p>
            </div>
        </div>
    </div>
    <div class="dock">
        <a href="another-page.html">New Tab</a>
    </div>
</body>
</html>
于 2013-04-28T14:17:45.347 回答