0

In the following code I have placed following link inside the popup:

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

When I clicked on the link, google.com loads but its consumes entire HTML page. I want it to just open inside the pop up, without harming parent document body. How can I achieve this?

   <!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>
dasfdsa
  • 7,102
  • 8
  • 51
  • 93

2 Answers2

2

You cannot access google from your popup (or iframe), due to CORS policy to prevent Clickjacking, I bet you can open it in a new window, you need target="_blank" attribute:

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

Check this question for better guidance How to show google.com in an iframe?

Community
  • 1
  • 1
KAD
  • 10,972
  • 4
  • 31
  • 73
0

use iframe instead of <a href=""></a>

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

              <p><iframe src="http://www.w3schools.com"></iframe>Go to w3school!</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>

For reference check this

rushil
  • 591
  • 7
  • 16