CODEWITHSUNDEEP
htmlgoogle-sheetsembeddreamweaver
thunderbbolt
thunderbbolt

Reputation: 1

Google Sheets embedded in web page

I have a Google sheet embedded in my webpage and want to be able to click a link on the same page and change it to another spreadsheet. For example:

Link 1 (Loads Google sheet 1)
Link 2 (Loads Google sheet 2)
Link 3 (Loads Google sheet 3)

When I click link 1 the spreadsheet shows up fine within my web page. I now want to click on link 2 clear Google sheet 1 from link 1 and load a Google sheet 2 in the same place on the page. Link 3 will then load Google sheet 3 when clicked on.

Any ideas how to go about this?

    $(document).ready(function(){
       $("#HD").click(function(){
        $('#result').load('https://docs.google.com/spreadsheets/d/e/2PACX-1vQzTUQh0_LJWxHRYiSeOpw1Qy5-TJ3mKPQVVC3kQzGh-6ZlCO0ujbRDH1jVowBYXP06x-3trgRji8Bc/pubhtml?widget=true&headers=false');

       }); 
<div class="row">
        <section class="6u">
        <ul class="default">
        <li><a id=HD href="#">Military Headstone Application</a></li>
</ul>

<div class="row">
  <section class="6u">
    <ul class="default">
      <iframe width=1400 height=900 src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQzTUQh0_LJWxHRYiSeOpw1Qy5-TJ3mKPQVVC3kQzGh-6ZlCO0ujbRDH1jVowBYXP06x-3trgRji8Bc/pubhtml?widget=true&amp;headers=false"></iframe>
        <div id="result" style="clear:both;">

Upvotes: 0

Views: 635

Answers (1)

Sujit
Sujit

Reputation: 1782

Try this... It uses only HTML.

Answer from here

<html>
<p>Click on links bellow to change iframe content:</p>
<a href="https://docs.google.com/spreadsheets/d/e/2PACX-1vQzTUQh0_LJWxHRYiSeOpw1Qy5-TJ3mKPQVVC3kQzGh-6ZlCO0ujbRDH1jVowBYXP06x-3trgRji8Bc/pubhtml?widget=true&amp;headers=false" target="sheets_embed">Link 1</a> -
<a href="https://bing.com" target="sheets_embed">Link 2</a> -
<a href="https://en.wikipedia.org" target="sheets_embed">Link 3</a>

<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vQzTUQh0_LJWxHRYiSeOpw1Qy5-TJ3mKPQVVC3kQzGh-6ZlCO0ujbRDH1jVowBYXP06x-3trgRji8Bc/pubhtml?widget=true&amp;headers=false" width="100%" height="100%" name="sheets_embed"></iframe>
</html>

Replace links with different spreadsheets

Upvotes: 1

Related Questions