Category: JQuery

23 Dec 2014 22:00

Joined:	19/12/2014
Level:	Bronze
Points:	7

Points:	3

Load the local file in iframe using jquery

I have the html file on my desktop.
I want to read the content of this html file and display on iframe.
Below the steps:
on my page I have a browse option of "input type=file".
By using this i will select the html file.
After selection the content of html need to be rendered on my iframe.

can any one check this..

#755168

25 Dec 2014 23:58

Joined:	30/04/2012
Level:	Gold
Points:	7233

Points:	2

You can use following code snippet for local file in iframe using jquery


<iframe src="content/Yourfile.html" width="100" height="100"></iframe>
<iframe src="http://www.Yourexamplesite.com/file.html" width="100" height="100"></iframe>

#755222

28 Dec 2014 20:40

Joined:	15/12/2014
Level:	Silver
Points:	104

Points:	2

it is simple just place the content of the path file in to iframe

but i dont know what error you are getting

<body>
<iframe src="iframe.html"></iframe>
</body>

#755228

28 Dec 2014 22:36

Joined:	28/06/2007
Level:	Diamond
Points:	56294

Points:	2

Simply set the below code to load a local file in iframe


$(#IframeIf).load("/Yourfilename.html");

Thanks & Regards
Anil Kumar Pandey
Microsoft MVP, DNS MVM

#755248

28 Dec 2014 23:13

Joined:	29/10/2014
Level:	Gold
Points:	1106

Points:	3

Hi,
use the below code for your references:

/// Html Content

here only u create the html content and Iframe div and call this div inside the jquerry along with ur "Html" file.

<html>
<head>
</head>
<body>
Some text
<div id="iframediv"></div>
</body>
</html>

//// Jquerry

$.ajax({type: "POST",url:"content/file.html",dataType:"html",success: function(data) {$('#iframediv').html(data);}});

hope it will work for uuu..

Thanks,
chitaranjan

#757561

02 Apr 2015 01:56

Joined:	25/08/2011
Level:	Gold
Points:	780

Points:	4

Hi,

if you want to display it satically then just refer that path to iframe src property attribute then it will load the html page in iframe

or else if you want to set the same with dynamically then write a function to load the content in which refer the url to src attribute of the iframe.

please refer the code snippet bellow

function setiframeurl(url)
{
$('#frameid').attr('src',url);

}

by calling this function your iframe will load the content referred in the url.

Regards
SriSunny

Load the local file in iframe using jquery

About dotnetspider.com

Quick Links

General

Services