Question

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

<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>

Answer 1

由于CORS政策要阻止Clickjacking，您无法通过弹出窗口（或iframe）访问Google，我敢打赌您可以在新窗口中打开它，您需要target="_blank"属性：

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

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

Answer 2

使用iframe代替p-calendar

<a href=""></a>

供参考check this

如何打开弹出窗口中的链接？

2 个答案: