CODEWITHSUNDEEP
jquery-mobileiframecordova
AddyProg
AddyProg

Reputation: 3050

Url is not loading in iFrame

i am trying to load url in iFrame and using jQuery Mobile tabs but it shows empty frame and url is not being loaded here is the html code

<div data-role="tabs" id="tabs">
  <div data-role="navbar">
    <ul>
      <li><a href="#one"><img src="faceBook.png" width="84" height="38"></a></li>
      <li><a href="#two"><img src="gplus.png"  width="84" height="38"></a></li>
      <li><a href="#three"><img src="linkedInn.png" width="84" height="38"></a></li>
      <li><a href="#four"><img src="tweeter.png" width="84" height="38"></a></li>
    </ul>
  </div>
  <div id="one">
    <iframe id="facebookFrame"  height="100%" width="100%" src="http://m.facebook.com" > </iframe>
  </div>
  <div id="two">
    <iframe id="gplus"  height="100%" width="100%" src="https://plus.google.com" > </iframe>
  </div>
  <div id="three">
    <iframe id="linked"  height="100%" width="100%" src"https://touch.www.linkedin.com" > </iframe>
  </div>
  <div id="four">
    <iframe id="tweet"  height="100%" width="100%" src="https://mobile.twitter.com" > </iframe>
  </div>
</div>
<div data-role="footer">
  <p>&copy;ABC</p>
</div>

Upvotes: 1

Views: 860

Answers (1)

CodeFanatic
CodeFanatic

Reputation: 11474

UPDATE: The given Facebook hack is not working anymore, it was solved 07/14

You are not able to place it in an IFrame because the page developers have forbidden you to do so.

As you can see here, when using the IOS developer Console

Refused to display document because display forbidden by X-Frame-Options.

X-Frame-Options

DENY 
The page cannot be displayed in a frame, regardless of the site attempting to do so.

SAMEORIGIN 
The page can only be displayed in a frame on the same origin as the page itself.

There are some possible timeintensive workarounds, like using CURL (PHP.net) as a proxy.

Using specific Hacks of the Social Networks, like this one for Facebook, which are NOT recommended, due to legality and due to the fact that they are working on fixes, after which your Application/Website etc. will NOT work anymore.

Creating an Native Mobile application, with the downside that you have ZERO portability.

Creating an Mobile Application, that uses mostly the Webstandards (HTML, CSS, JQuery), for example Cordova .

PRO

  • Easy to style and setup

CONTRA

  • Portability

The last one is what i would suggest, as long as you got a small amount of Operating systems, that need to be served.

Upvotes: 1

Related Questions