Iframe open link in specific target on page - html

I am coding simple html page with menu on the left side. when users click on the menu links I want the links will open on the right side.
In the past I used the iframe tag, but I want to know if there is a new way or another ways to do it?
<iframe name="rightSide" src="index.html" align="top" height="100%" width="100%">

Within the link, set up a target="rightSide" attribute. This will load the url in the link into the IFrame.
Load Me

Please find the code below
<iframe name="myFrame"></iframe>
and on target

Related

Is it possible to show a specific element of a webpage in an iframe?

Say I have this code:
<iframe
src="https://www.test.com/test"
height="720"
width="1280">
</iframe>
Now let's say I want to only show a specific part of test.html. I'm not looking to crop the iframe and disable scrolling to show a part of the page, I would like to only show a specific element of the webpage in the iframe.
Is there a way to do this? Perhaps by xPath, CSS selector, etc.?

How to open a link of external website on the same iframe (embed website)?

I created an iframe to embed an external website, the problem is that, for example, if the user clicks on the Twitter button of the embed website, this action will take the user out of my page, loading Twitter's page, I want to avoid that, I want to load that content on the same iframe, how can I do that? I tried naming the iframe, the parent target, but that didn't work.
Here an example of my code:
<iframe src="http://superluchas.com/" width="100%" height="1000" frameborder="0" scrolling="no"></iframe>
If the third party page targets a specific frame (including _top and _blank) then there is nothing you can do to override that.
Security restrictions prevent you getting access to the DOM.
The twitter button probably has '_blank' as target in <a> tag. You will need to change it to '_self'. More info on target attribute can be found - W3Schools
Also here is an example in which if you click the links inside of IFrame target you will see the page loads into the frame itself, not outside. JSFiddle

Can't show some websites in iframe tag

I am trying to develop a page in which I can show more than 3 website at a time,
as below:
<ul>
<li>
<iframe src="http://www.facebook.com/" /><p> iframe is not supported</p>
</li>
<li>
<iframe src="http://www.yahoo.com/"></iframe>
</li>
<li>
<iframe src="http://www.google.co.in"></iframe>
</li>
</ul>
The problem is that it shows yahoo.com and google.co.in, but does not display Facebook in the iframe.
You have to check for HTTP response header X-Frame-Option of those sites. if its value is "DENY or SAMEORIGIN", then you can not load those website in the iframes.
DENY = No one can load the website in iframe. Even the same domain page wont be able to load.
SAMEORIGIN = only a page which is in same domain can load this website in iframe.
Since some websites have decided to disable embedding them in iframes theres nothing you can do with pure html solutions. You could create a serverside script (in PHP) that pulls the target site via your webserver and then use the html etc.
The only way I can think of that would enable you to check wether the site has loaded is to search the iframe for a specific element that exists on the target website (for example a div with a specific id or class on the Facebook's front page). The reason would be that different websites can handle being embedded into iframes differently and while some might display some content, some may display nothing etc and the only way to be sure is to check for real elements.
facebook does not want you to load their main site in frames
<iframe src="http://m.facebook.com/" width="200" height="300" scrolling="auto" frameborder=0></iframe>
width="200" height="300" can be adjusted accordingly.*
What this does is load the mobile version of facebook in the frame instead of the main site.
Reference
You can use the object tag:
<object data = "https://facebook.com"></object>
You will not able to do that, you can only iframe like button... someother not whole site.

trouble with iframe and php

I have an issue and need some clarification
I have a wordpress site i am building and every time i try and code jquery into the theme i get errors so my work around has been to use two iframes....one being the menu
Can you have a link in a iframe load that links content in the area outside the iframe...if so how....if not is there a work around.
<iframe src="http://www.heartkidsplayshop.com/wp-content/themes/outreach/menu/all-examples.html" width="620" height="110" frameborder="0"></iframe>
Yes, use target="_parent" on the links in the iFrame.

Adding Facebook Like button to fan page

i have a facebook page and i cannot insert the button facebook like. i tried to put an iframe code and it works in a simple site. but in the facebook page dosn't work....why????
<iframe src="http://www.facebook.com/widgets/like.php?href=http://example.com"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
Use THIS LINK for generating the "Like" button you need. This is the official button generator supplied by Facebook.
Now, you can try the like box:
https://developers.facebook.com/docs/reference/plugins/like-box/
You can not insert iframe on landing page that is the one you have specified in application settings from developer section. You can only insert iframe in inner pages.
For example, I have created this fan page and it was not allowed to use iframe on landing page, so we made a splash screen and used the iframes all around in inner pages.