Question

我想在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>

Answer 1

@ChristianB您在创建iFrame时未将点击事件附加到iFrame，您尝试将点击事件附加到现有的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; 
              });
            });
        }

Answer 2

谢谢Mohit Padalia。你帮了我很多忙。我尝试使用你的代码，但没有工作。我相信它对你有用，因为函数selectNewTab（）不起作用。在这种情况下，我添加了一个策略来强制选择创建的新选项卡。请注意，当运行下面的代码时，会选中新选项卡，然后单击“ckick here”，新链接将在同一选项卡中打开。但是，如果单击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>

单击iframe时如何在iframe外部获取点击事件

2 个答案: