We Keep Coding

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.

Open iframe source in new tab

I've got an iframe that people can navigate through to get to a specific place, but as it is cross-domain some of the javascript on the site doesn't work (Such as looking at product history for example...)
I've been trying to find a way to make a button that will take whatever page the user is on in the iframe and open that link in a new tab.
While trying to research if this was possible, all I could find is people opening links from within an iframe in a new tab, which is not what I need.
I need to make a button that onclick will open a new tab with whatever link the user is currently on in the iframe.
I haven't really tried many things because I cannot find anything on the subject (Probably due to terrible wording), but I'm thinking my best chance is jquery/javascript, however, I'm not very fluent in javascript.
So my question is, is it possible to open an iframes url into a new tab, and if so, what would be the most efficient way to do so?
The website that is in my iframe is cross-domain and I cannot edit its source.
What I currently have is this:
<iframe id="iframe" class="frame" name="iframe" height="100%" width="100%" onload="refreshLink(this.contentWindow.location.href)"></iframe>
Note: The src is set by javascript on page load.
Under that I have:
<script>
var hyperLink = document.getElementById("iframe").src;
function refreshLink(link) {
hyperLink = link;
document.getElementById("button").href=hyperLink;
}
</script>
Above all of that I have:
Open in R1
But, when I click the button at any given time it opens a new tab to the same url I was at before (a tab that goes to the same page the iframe is displayed on).

I believe this should be possible
For iframes displaying the same domain content you can get the current site url with something like this:
document.getElementById("myframeID").contentWindow.location.href
But for cross-domain iframes you will get the following error when trying to get the location on the site the same way:
VM2536:2 Uncaught DOMException: Blocked a frame with origin "https://example.com" from accessing a cross-origin frame.
However this seems to work to get proper URL from cross-domain iframes
document.getElementById('myframeID').src
To finish off you could do something like this (assuming you use jQuery by your tags):
$('body').on('click','#button', function(){
var url = document.getElementById('myframeID').src;
var tabOrWindow = window.open(url, '_blank');
tabOrWindow.focus();
});

Here's a starter. With markup like this:
<iframe id="myIframe" src="http://yourwebsite.com"></iframe>
Click here
Start with some JS that changes the anchor's href to the src of your iframe:
var hyperLink = document.getElementById("myIframe").src;
document.getElementById("button").href=hyperLink;
Add an onload attribute to your iframe:
<iframe id="myIframe" src="http://yourwebsite.com" onload="refreshLink(this.contentWindow.location.href)">
</iframe>
The line onload="refreshLink(this.contentWindow.location.href)" fetches the current URL of the iframe where the user's been navigating and sends it as an argument for the function refreshLink.
Then we can declare that function, and the full JS code would look like this:
var hyperLink = document.getElementById("myIframe").src;
function refreshLink(link) {
hyperLink = link;
document.getElementById("button").href=hyperLink;
}
This works, but it's subject to whatever policies each website has regarding iframes and http/https.

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"));
});

open link from one page into iframe on toher page

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.

HTML5 Loading the external content into a div and using pushState()?

I have a main page "index.html". This main page is the enterance to the site which is done in HTML5. There are other pages for the site:
"about.html", "work.html", "portfolio.html", "contact.html"
So all of these pages have a div called "contentDiv" which has the copy/text accordingly. User enters the site via "index.html" and if user clicks on one of following the nav links:
About | Work | Portfolio | Contact
"index.html" page loads the content of clicked page's "contentDiv" using JQuery's load() call and then slides in the loaded div using animation.
Site is backward compatible so if Javascript is disabled then user is taken to the clicked page instead of having the "index.html" to load the content via load() call.
By the way, the nav link(s) are coded like this:
<a href="about.html" title='About'>About</a>
Once the "index.html" loads the requested content, By using pushState(), the URL is updated. So if user clicks on "about" link then pushState() updates the URL to:
"http://www.abc.com/about.html"
The reason I have not inserted any hash into the href tags, because I want the site to have a fallback just in case if the Javascript is disabled. This way, user can be directed to the requested page ('about.html') instead of "index.html".
So far all works well as expected however here is the issue. When user is on "index.html" and clicks on anyone of the sections for example "about.html", content is loaded and URL is updated via pushState(). So now the URL is "http://www.abc.com/about.html". Now if user refreshes the page("index.html"), "about.html" is loaded instead of "index.html" doing the load() calls.
Lets say if I code the nav href tags like this:
About
then the URL ends up having a hash in it. And if I copy and email the link "http://www.abc.com/#about" to a user, and if user tries to open the link via browser with javascript disabled then user will not be able to get to "about.html" because link only has '#about' instead of "about.html".
What I am trying to do is indeed doable I just don't know how to approach it. If anyone can help me on this that would be wonderful.
Forgive me, for such a long description.
Thank you.

I ended up setting all the nav hrefs to "". and then setting the hrefs values on document.ready() function.
$('a[rel=nav]').attr('href', '');
Thanks.

This code will achieve what you need to do and support the users with javascript disabled.
$('a').click(function() {
window.location.hash = $(this).attr('src');
return false;
}
Your urls will look something like http://www.yoursite.com/#about.html if you click on the about link and they work when you refresh.
If you want to learn more about making ajax sites I recommend you visit this blog Css-Tricks.com