CODEWITHSUNDEEP
javascripthtmliframeparameters
oldaccawd11311
oldaccawd11311

Reputation: 21

I'd like to set the iframe src on another page with a URL variable sent via link click

Explanation

I have a site where I post my writings, I have a div of links that are all clickable that when clicked send 2 variables, the piece's title and link (then on the other page with the iframe, the title is displayed in an <h1\> and the link is passed to the iframe src).

I do this like this:

<div class="sidenav">
<h3> Writings:</h3>

    <a href="iframe.html"
        onclick="getLinkAndTitle('TITLE BLAH BLAH', 'https:/\/WWW.LINK-GOES-HERE');">TITLE BLAH BLAH</a>
        ...
</div>

Here is the getLinkandTitle() function (in my app.js):

function getLinkAndTitle(title, link) {
    sessionStorage.setItem("title", title);
    sessionStorage.setItem("link", link);
    location.reload();
}

And this is on the page with the iframe:

     <script>
        window.onload = function () {
            var title = sessionStorage.getItem("title");
            var link = sessionStorage.getItem("link");
            var iframe = document.getElementById('ifrm');
            iframe.src = link;
            var titleText = document.getElementById('title');
            titleText.textContent = title;
        }
    </script>
       ...
    <h1 id='title'></h1>

    <iframe id='ifrm' src="" width="900" height="650" style="max-width:95%;border:3px solid black;"></iframe>

This no longer works for me because I need to be able to share the writings via individual link (right now it's just www.mysite.com/iframe.html for all of them). I do still want to keep the iframe setup I have, meaning I don't want to make all my writings on different pages, I like how there's one page that takes in them (via google shared link (works for me)).

So I need the title and link to the individual writing to be passed on to the iframe page's URL somehow and have the iframe src take the URL and the <h1> take the title.

I only know JavaScript and HTML and I've never used jQuery or PHP but after looking for answers, using one of those seems like the only way... So if jQuery or PHP is in your answer, please me mindful I have zero experience with either and be as specific as possible.

Thank you! :)

Upvotes: 0

Views: 320

Answers (1)

charlietfl
charlietfl

Reputation: 171679

One approach would be to use a url hash with a descriptive human readable slug for the article. Then store the relevant data (link , title and slug) in a javascript object or remote json file.

Something like:

const data = [
   {title:'My cool article', link:'http...', slug: 'my-cool-article'},
   {title:'Some other article', link:'http...', slug: 'some-other-article'}
]

Then in links use:

<a href="/iframe.html#my-cool-article">My cool article</a>
                   <!--  ^^^^^  hash to match slug in data -->

Then in the iframe page you use the url hash to look through the data to find matching slug and use appropriate title and link (or defaults when no matching slug in url)

const hash = window.location.hash;// location object has page url components

// defaults for no match
let src = '/not-found.html', titleTxt = 'Not Found';

if (hash && hash !== '#') {
  // remove the `#` from url hash
  const hashSlug = hash.slice(1);
  // use Array.prototype.find() to get matching item from array
  const item = data.find(el => hashSlug === el.slug);
  // if no match item is undefined
  if (item) {
    // set corresponding values
    src = item.link;
    titleTxt = item.title
  }

}

document.getElementById('title').innerText = titleTxt ;
document.getElementById('ifrm').src = src;

Upvotes: 2

Related Questions