CODEWITHSUNDEEP
javascriptjqueryhtmliframe
sforg1
sforg1

Reputation: 57

Pass parameter to iframe src

I have a webpage that contains an embedded page using an iframe. I have parsed the URL to append the parameter to the main url to create a new link, but now I need to pass the path to the iframe src to load the page when the link is clicked on.

iframe code

<iframe name= "myiframe" id = "load" src="https://www.site-name.com/Manual/application.htm">

jQuery code to parse url

  $(document).ready(function () {
var URL = 'https://www.site-name.com/f1'; // MAIN 

var otherURL = 'https://www.site-name.com/Manual/module_1_4_2.htm'; // iframe URL

//Create a new link with the url as its href:
var a = $('<a>', {
    href: otherURL
});
var sResult = '<b>Protocol:</b> ' + a.prop('protocol') + '<br/>'  + '<b>Host name: </b>' + a.prop('hostname') + '<br/>' + '<b>Path: </b>' + a.prop('pathname') + '<br/>' 

var path = a.prop('pathname');   // pass the path to the MAIN URL 
var newURL = URL + "?page="+ path.substring(path.lastIndexOf('/') + 1);

// display new URL 
$('span').html(sResult + "<br><b>New URL: </b>" + newURL);  

// Correctly displays
// New URL:https://www.site-name.com/f1? page=module_1_4_2.htm

The new url is now https://www.site-name.com/f1?page=module_1_5_3.htm

This works but now I need to pass the query path to the iframe src to load the page when the link is clicked.

What I am trying to do is pass the path to the iframe src. How do I pass the path variable to the iframe src.

Upvotes: 2

Views: 6663

Answers (1)

wayneOS
wayneOS

Reputation: 1425

Use jQuerys function load() to change the src attribute of your iframe.

var url = $("#load").attr ('src');

var a = $('#link');
var path = a.prop ('pathname');
var redirectUrl = url + "?page="+ path.substring (path.lastIndexOf ('/') + 1);

$('#load').load (redirectUrl);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<iframe name="myiframe" id="load" src="https://www.site-name.com/f1"></iframe>
<br/>
<a id="link" href="https://www.site-name.com/f1?page=module_1_5_3.htm" target="myiframe">TEST LINK</a>

Upvotes: 1

Related Questions