javascript - 如何打开弹出窗口中的链接?

标签 javascript jquery popup

在下面的代码中,我在弹出窗口中放置了以下链接:

<p><a href="http://www.google.com">Go to google!</a></p>

当我点击链接时,google.com 会加载,但它会占用整个 HTML 页面。我希望它只是在弹出窗口中打开,而不损害父文档正文。我怎样才能实现这个目标?

   <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"   href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>

    <div data-role="page">
      <div data-role="header">
       <p><a href="http://www.google.com">Go to google!</a></p>
      </div>

      <div data-role="main" class="ui-content">
        <a href="#myPopupDialog" data-rel="popup" data-position-to="window" data-transition="fade" class="ui-btn ui-corner-all ui-shadow ui-btn-inline">Open Dialog Popup</a>

        <div data-role="popup" id="myPopupDialog">
          <div data-role="header">
            <h1>Header Text</h1>
          </div>

          <div data-role="main" class="ui-content">
            <h2>Welcome to my Popup Dialog!</h2>
            <p><a href="http://www.google.com">Go to google!</a></p>
            <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b ui-icon-back ui-btn-icon-left" data-rel="back">Go Back</a>
          </div>

          <div data-role="footer">
            <h1>Footer Text</h1>
          </div>
        </div>
      </div>

      <div data-role="footer">
        <h1>Footer Text</h1>
      </div>
    </div> 

最佳答案

由于 CORS,您无法从弹出窗口(或 iframe)访问 google政策防范Clickjacking ,我打赌你可以在新窗口中打开它,你需要 target="_blank" 属性:

<p><a target="_blank" href="http://www.google.com">Go to google!</a></p>

检查此问题以获得更好的指导 How to show google.com in an iframe?

关于javascript - 如何打开弹出窗口中的链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41056270/

相关文章:

javascript - 为什么我的 Promise 数组在调用 Promise.all() 之前运行?

javascript - 如何在选择另一个按钮时停止脚本

jquery - Microsoft Edge PDF 滚动和突出显示问题

javascript - 推特 Bootstrap : Popover and Auto Refresh

javascript - jQuery:使用插件 Tipsy 将工具提示附加到鼠标光标位置

javascript - 将鼠标悬停在列表上时传单打开弹出窗口

javascript - FB 提要对话框不会在弹出窗口中显示图片缩略图

php - REST 用户认证

javascript - 如何访问另一个对象中对象的属性

javascript - Typescript:如何声明具有从 IIFE 返回的自定义属性的函数的类型