open link from one page into iframe on toher page - javascript

I want to do something where i have a link on a page called home.php that links to facebook , when you click on this link i want it to take you to a page called frame.php with a header at the top and the facebook link in an iframe. like this: http://themeforest.net/item/ime-portfolio-web-app/full_screen_preview/2918523 can anyone advise what the best way to do this is. If you look in the source of that link you'll see they have a header followed by an iframe with the previous link propagated into it.
Hope this all makes sense, if not heres some basic coding of what I'm trying to acheive:
link
---Next Page
<header>My website name/logo</header>
<iframe src="propagated iframe link from previous page">

You need to create a new page which contains the header and an iframe below. This page needs to take a URL in via the query-string and then output the url as the src of the iframe.
An example PHP page (iframe.php) (Just the bare minimum stuff):
<html>
<head>
</head>
<body>
<div id="header">Your header</div>
<iframe src="<?$_GET['url']?>"></iframe>
</body>
</html>
Then you call this page like so:
Open page
This should give you an idea how it's done, but note that you might need to check the incoming URL and only allow certain domains etc. in case you do not want users to be able to open what ever URL they want through your iframe.php page.

That is not possible since your cannot load Facebook in an iframe, it's forbidden.
Otherwise, your frame.php page could have simply contained a <header> and the <iframe> below.

Related

Accessing html elements from another page inside div

So I'm pretty new to html/javascript but i'm working on a project where i'm loading a external html page inside a div, that when loaded looks like so:
<div class="content" id="content">
<object type="text/html" data="./ProjectsHTML/radio_project.html">
#document
</object>
</div>
and inside the '#document' is the external html. This external html contains some titles that can be minimized and maximazed to hide/show their content.
I have a side-menu on the main html that displays all the titles (the titles were hard coded on the side-menu) and I want to access the titles position inside the external html so when the title is clicked on the side menu, the external html autoscrolls to the position of said title.
If it's usefull for the solution, I'm using Electron.
Please help :)
Assuming the pages are from the same domain, a similar question is addressed here.
However, if the page within the iframe is from a different domain, you won't be able to access individual elements - that's cross-site scripting, and it is a security vulnerability.
There are a few options if you own both pages, even if they are on separate domains:
You could add HTML links/bookmarks to the page within the iframe and then reload the iframe when the user clicks the menu option on your host page. If would require a reload of the page within the iframe, but it could be used to get similar behavior.
You could post messages to the iframe and handle "scroll requests" in the hosted page. You will want to be careful with validation of the source of those messages.

How to change src in iFrame on user clicks ??

I am a newbie with coding php or js.
So please advise me if I am asking the question the wrong way.
I would like to be able to pass and embed URL address from a link into the src="URL embedded here" of an iFrame. The page with the link has links with a company name displayed, the user will click the link and a new .php page will be displayed with an iFrame that displays the actual website of that company within our site. So... for example... on the index page, the user clicks "Goodyear" and it launches a .php page containing the Goodyear website displayed within the iFrame. Now... I have about 20+ vendor links and am trying to avoid 20+ individual html or php pages to display that data. Especially since the vendor list will change often. Any assistance would be greatly appreciated. The pages that I am referring to are http://seindl.com/index.php where you can see the appropriate URL's in the href elements; and the resulting linked to page http://seindl.com/vendor.php that currently displays a static Kuriyama.com website.
Well if you have list of links, you do not need jquery or javascript to change the iFrame src. For example, if you have iframe like this:
<iframe name="frame1" id="frame1" src="about:blank"></iframe>
Simply creating links like this:
LINK
will open the page in iFrame (based on target attribute of the link, which must match the iframe name).
If you really need to do it with jQuery, you can try something like:
$('#frame1').attr('src','http://something.com');
Or with javascript without libraries:
document.getElementById('frame1').src = 'http://something.com';
Which will also change the page open in the frame.
Appned id of vendor to the url like below on index.php page:
vendor.php?id=10
And then on vendor.php file, base on the id (use $_REQUEST['id'] to get id) you can put the url of the vendor.
$id = $_REQUEST['id'];
if($id == 10){
$vendorSiteUrl = "http://vendorsiteurl.com";
}
....
<iframe src="<?php echo $vendorSiteUrl;?>"/>
Hope this helps.

get the internal/inner links of an iframe

I have website which includes some iframes, first thing that I have a website which contains only an Iframe. Let's call my website as www.example.com and the iframe inside that contains www.example2.com or it's a dynamic content, the iframe src will be changed when i change through admin cpanel. So i can get the src from there, my requirement is to get the sub links inside that iframed link. Suppose which contains an aboutus.html page, can i get that link using javascript/jquery or any other method?
Something like this:
$("#bullUrl a").on("click",function(){
//alert($(this).prop("href"));
// or
// alert($(this).attr("href"));
});

Dealing with frames - fixed content of a website

I'm working on my website and the main page (index.html) is composed of two frames: page1.html and page2.html. This is the code:
<!DOCTYPE html>
<head>
<frameset rows="16%,84%" framespacing="0" border="0" frameborder="0">
<frame name="page1" target="page2" src="page1.html" scrolling="auto">
<frame name="page2" src="page2.html" target="_self" scrolling="auto">
<noframes></noframes>
</head>
</html>
The first one works as a fixed content of the page that contains
multiple links to the rest of the site. It is absolutely important
that this page remains open every moment.
The second is the "body", the content area, wich is replaced when any
of the links are clicked.
So here's my problem: if any page is accessed not from index.html, for example, google, page1.html will not exist, since it only opens through index.html and the site will be missing it's main links.
I'm looking for a code that will check if the page "page1.html" is present and if it's not, open it as a frame.
The closest I've got was this javascript code:
<script language="javascript">
window.onload=function(){
if(self==parent)
window.location.href = "index.htm"
}
</script>
It'll redirect any user who enters a page if not from index.html, to it. But that's still no good. Any clues?
When I read your question, first thing that crossed my mind was to read and act upon window.frames.length. Exactly what you have done yourself.
However, you could pretty much see a frameset and frame as deprecated technologies nowadays. Instead, put the links in a HTML5 <nav> or regular <div>, then put the content in a HTML5 <article> or another regular <div>. Next load the content dynamically using vanilla/plain JavaScript or a framework such as jQuery.
If you insist on putting the navigation links in a "frame" that never goes away, and you want to load HTML files into a sub part of the screen, then I'd still put the navigation links in a <nav> or <div> and use an <iframe> for the content.
Frames are deprecated but anyways:
Check if the page is a parentframe like this:
if(window.top == window.self)
window.top is the parent frame and window.self is the current frame. It they are equal, there is no parentframe(set).

Creating takeover page

There is a need to have a takeover page when users visits the website e.g. www.domain.com and instead of displaying the contents immediately a splash page is displayed. They then have the option to visit the home page by clicking on a link.
Is there a way to do this without changing the code on the home page with the exception of including a javascript file that accommodates the requirements i.e. takeover the page with another HTML page?
Is there an example I can find that does the above?
You could do a DNS "rewrite" to an other IP and on the other Webserver you capture or simple copy/paste the original HTML contents and show it but also add this HTML splash notice.
But there is no way of adding a splash page without changing the content of the page or having access to the code.
If you have access to the HTML code, you can include a JavaScript file on which you have access, maybe also on an other server. Also add one noscript tag for visitors without JavaScript disabled.
Example:
<script src="http://www.asdf.com/you/have/access/to/this/file.js" type="text/javascript" />
<noscript>SPLASH NOTICE</noscript>
How the file.js should look like you can ask an additional question. Or check on G.
The good thing with this "remote" JavaScript file is, you can remove the splash notice later from the file without touching the original code again.

Categories