get the internal/inner links of an iframe - javascript

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

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.

Using Jump Links from Parent Page to an Iframe

I have a parent page that contains an iFrame. The anchors have that have a respective The anchors are outside of the iframe but I want them to be able to work as page jump links.
I've tried adding and targeting the iframe but it still does not work for me.
Any suggestions or recommendations?
In order to target an element inside of the iframe, you'll want to use Javascript and target it like so:
function findText() {
var frame = document.getElementById('iframe').contentWindow;
frame.scrollTo(0,frame.document.getElementById('suchen').offsetTop);
}
Then your markup will be something like this:
<iframe src="http://fiddle.jshell.net/pkvhw/2/show/" id="iframe"></iframe>
Find Text
Where iframe is the id of the iframe on your page, and suchen is the id of the element you want to find within the iframe.
Here is a fiddle of it in action: http://jsfiddle.net/vs9xhs0o/
Note: You will run into issues when trying to use this going across domains. Most sites will not allow you to make cross-domain requests like this, so make sure you have control over the site you are viewing through the iframe.

Dynamic Website - load almost all of the page with out reload and change the url

I am developing a website and having trouble figuring out what I can use to accomplish this requirement.
I need a website where links in the document load the contents of page that was clicked.
I am thinking about using angular.js but how might a user get back to the back by entering it into the url.
Example of what I am looking for:
You are on www.example.com
You click the link to www.example.com/profile/1234.
The page doesn't reload but loads the contents of the new page.
The static element at the bottom of the page doesn't change the the rest of the page does.
The url has also changed and you have the history of being at www.example.com
You can also load the exact same page by pasting the url www.example.com/profile/1234, it also has the same bar at the bottom.
You could also say I need something similar to youtubes website. You click a link and it loads only some of the page. But if you re-enter the url you get all of the page.
Thanks.

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.

Having an Iframe with `a` tag with some id on it, how to create a new iframe that would follow that `a` url?

We have a main web page with Iframe on it. So we have a web page loaded into Iframe. There is a link on it (a tag). We know its id. How to create a new Iframe on our main page that would follow that link? (link is relative to the site we put into our iframe).
Assuming the iframe and your web page is on the same domain, you get the a's href from the iframe's document.
var src = document.getElementById('myframe').contentWindow.document.getElementById('aid').getAttribute('href');
have a look here:
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_contentdocument
You'd have to take the full url and past it into your own iframe.
If that's not what you meant please provide code.

Categories