Member Avatar for borobhaisab

Hello Programmers,

We use the fragment in urls for the browser to hone in on a particular secion on our page.
http://www.yoursite.com/#heading_number~1
http://www.yoursite.com/#heading_number~2

And so on.
Now, we can easily open those particular sections in iFrames of your's or third party site's) that does not have a fragment {#) in the url.
And, let's say you want to open in an iFrame that particular section (on some page of your's or on third party site's) then how would you code the iFrame to be able to show the page honed-in on your desired section ? You cannot do it with iFrames in this case. Now can you ? So, let's try embedding here. That's why I ask, how to write the embedding code here ?

Edited by borobhaisab
  • 3 Contributors
  • 6 Replies
  • 160 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by Naor

Recommended Answers

All 6 Replies

Member Avatar for borobhaisab

@Dani

I hope I did make some sense above cos I do not want to wakeup tomorrow and find my way here only to read none one unerstood me! It would be a waste of 24hrs wait. Lol!
Are there any embedding codes you using on your site ?

Member Avatar for Dani

Embedded <object> and <embed> are not meant to be used on HTML pages. You can use javascript's .ScrollTo() method to cause the iframe to scroll down to a particular section on the page.

commented: good +0
Member Avatar for Naor

The fragment identifier introduced by a hash mark # is the optional last part of a URL for a document.
if you already have a website with # navigation, means your website already works with # navigation, You can just embed your iframe with the url and the iframe will open in the fragment section.

for example:

<iframe 
      src="https://megaone.acrothemes.com/index-creative-startup.html#about-sec"
      style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"
      title="Iframe Example"></iframe>

will open the website in the about section.

<iframe 
          src="https://megaone.acrothemes.com/index-creative-startup.html#company-portfolio-section"
          style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"
          title="Iframe Example"></iframe>

will open the website in the company portfolio section

no special works needed when you embed the iframe.
the iframe url is mostly like your browser url.
It's easy to test it. just write html page with iframe in it and observe your self.
here is an example of html with iframe.
i included the url to some one page website template. but you can change it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HELLO</title>
    <meta name="description" content=""/>
  </head>
  <body>
    <iframe 
      src="https://megaone.acrothemes.com/index-creative-startup.html#about-sec"
      style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"
      title="Iframe Example"></iframe>
  </body>
</html>
Member Avatar for Dani

I hope I did make some sense above cos I do not want to wakeup tomorrow and find my way here only to read none one unerstood me! It would be a waste of 24hrs wait. Lol!
Are there any embedding codes you using on your site ?

I’m afraid that I don’t understand you. What type of embed code would you expect DaniWeb is using? As previously mentioned, I’m not a fan of iframes.

Member Avatar for borobhaisab

@Naor

Ah!
But let's say you want to open in an iFrame that particular line/spot (on some page of your's or on third party site's) where the paragraph has no ID) then how would you code the iFrame to be able to show the page honed-in on your desired line/spot ? Remember the fragment # needs to point to an id (id='') and here the paragraph does not have an id.
You cannot do it with iFrames in this case. Now can you ? Do correct me if I am wrong.
If you do not mind me budging in and asking you a question, is it technically poissible to do what I intend, do you know ?

Member Avatar for Naor

@borobhaisab

for third party sites:
if it's a third party site you can not control how the site behave so you can not inject or modify the html according to your need. you can try to embed the iframe on your domain but Due to cross-domain rules you will might not be able to modify the html / javascript of the 3rd party site. you can try but i don't think it will work.

for your own site
if it's a site you maintain or if it's a embeded iframe on same domain you can control where you put your fragment or you can modify the embeded iframe html / javascript.

anyway... iframe are almost exactly how your browser behave. if you open a site with fragment and your browser can navigate you to this section so an iframe can.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.