I need to display content(present in another HTML) in an iframe inside an already present HTML page. The iframe should first check if there is some content in the HTML, and only load if there is, if the source HTML is empty the iframe should not load.
Thank You
You'll have to use Javascript for this.
Your parent HTML file:
<html>
<!-- Your parent html file contents -->
<iframe id="iframe" src="">
</iframe>
<script src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() {
//get your iFrame html file
$.get("iframe.html", function(data) {
//check if file not empty
if(data) {
$("#iframe").attr("src", "iframe.html");
} else {
$("#iframe").css("display", "none");
}
});
});
</script>
</html>
To check wether the content is present in the iframe use this(it uses jQuery and let the id of iFrame be iframeid):
<!--free.htm -->
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$.get("test.htm", function(){
if($(this).contents().find("body").length<=0)
$("#iframeid").css("display","none");
});
});
</script>
</head>
<body>
<iframe src="test.htm" id="iframeid"></iframe>
</body>
</html>
Here are dome links that might be of help to you :
http://www.w3schools.com/jquery/
http://api.jquery.com/contents/
Related
I need to show my angular project(mentioned as http://test.com ) inside the div(.test). Is it possible to show angular project inside div without using iframe, object and embed? .Here is my code .Any help would be amazing .Thanks in advance
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$.ajax({
url: 'http://test.com', //Pass URL here
type: "GET", //Also use GET method
success: function (data) {
$('.test').html(data);
}
});
});
</script>
</head>
<body>
<div> Div of base html</div>
<div class="test"></div>
</body>
</html>
in your app.component.html you can put your <app-root></app-root> inside what you want:
<header (menuToggle)="sideMenu.toggle()"></header>
<menu [menu]="menu" #sideMenu></menu>
<div>
<app-root></app-root>
</div>
<footer></footer>
this is my app.component.html for example
I created a web page wherein I want to display there another HTML file. I used jQuery to do this but wasn't able to display the content of the file I have included. Why do you think this happened. Thanks a lot.
Here's my code for my mainpage.
sample.html
<html>
<head>
<title> Sample Only </title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script>
$(function(){
$('#footerLang').load("sampleFooter.html");
});
</script>
</head>
<body>
<div id="footerLang">
<h1></h1>
</div>
</body>
</html>
sampleFooter.html
<p> THIS IS A FOOTER </p>
It is highly possibly because you are placing the following block in head without $(document).on("ready", function() { ...; });
$(function(){
$('#footerLang').load("sampleFooter.html");
});
In this case jQuery will unable to find the #footerLang element since the DOM is not ready, you could revise the script as follow
$(function(){
$(document).on("ready", function () {
$('#footerLang').load("sampleFooter.html");
});
});
or move the script tag just before the </body>
<html>
<head>
<title> Sample Only </title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
</head>
<body>
<div id="footerLang">
<h1></h1>
</div>
<script>
$(function(){
$('#footerLang').load("sampleFooter.html");
});
</script>
</body>
</html>
I found out that this was just a browser compatibility issue. I launch it in Firefox and it worked.
I have a code like this:
parent.html:
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$("#test").draggable().click(function() {
$("#objeto").attr('data', "child2.html").draggable();
});
});
</script>
</head>
<body>
<h2 id="test">text(draggable/click)</h2>
<object id="objeto" data="child1.html"></object>
</body>
and
child2.html:
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$("#text").draggable();
});
</script>
</head>
<body id="text">child2 (draggable)
</body>
This works correctly, parent loads with child1 content and if you click on "text" it switches to child2, but what i want to know is:
am I downloading jquery.min.js and jquery-ui.min.js 2 times? or are is the second time pulled from cache? (since i'm asking for the same file again)
is there a way I could use jquery without including it on the child's header? (since it is already on the parent)
.load() only works on files coming from a server, so it will work later as I'm going to put this on a server
Edit: This code works on firefox but not on chrome
I've been trying to use ajax to load a webpage after selecting an option but the script doesn't even seem to load
here's the script + html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="DaVinciRace.css" />
<title> Da Vinci Race 2014-2015 </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
</head>
<body style="background:#f2f2f2;">
<div id="logo">
<img src="Resources\DVRLogo.png"/>
<!-- <p class="text">Da Vinci Race</p> -->
</div>
<div id="options" style="background:#0c0c0c; float:right;">
<div class="menu">
<div class="chronometre" ></div>
</div>
</div>
<div id="DVRChrono">
</div>
<script>
$(document).ready(function(){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
});
</script>
</body>
</html>
the document "Chronometre.html" is in the same folder as this html page
I feel like I'm missing something obvious but can't for the life of me figure out what it is
Try this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script>
(function($){
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
})
})(jQuery)
</script>
This isn't adding a click handler:
$("#options").on("click", ".chronometre", function() {
// code
});
Because it executes before the #options element exists on the page. The code is executing without error, the jQuery selector simply isn't finding anything. So there are no elements to which a handler can be attached.
You can fix this either by moving the code to the end of the page or by wrapping it in the document.ready handler:
$(function() {
$("#options").on("click", ".chronometre", function() {
$( "#DVRChrono" ).load( "Chronometre.html" );
});
});
Additionally, your script tags are broken. Each tag should have either a src or content, but not both. Separate them:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
// your code
</script>
<iframe id="iframe" style=" width:100%; height:500px" src="other.jsp" frameborder="0" name="myone">
<html>
<head>
<script>
$(function() {
$("#adduser1").click(function() {
alert("hiiii");
$('#iframe').attr('src', 'adduser.jsp');
});
});
</script>
</head>
<body>
<input type="button" name="AddUser" id="adduser1" value="AddUser"/>
</body>
</html>
</iframe>
here i want to load same iframe (its already loaded with other.jsp ) with other jsp adduser.jsp on triggering of inside event of same iframe
its alerting with 'hiiii' but not loading with jsp page
You should not use
$('#iframe').attr('src', 'adduser.jsp');
inside the self iframe. Use
window.location = 'adduser.jsp'
Looking at your code, it should work and it works for me.
The constraint may be the path of the file.. If that is not the case.
Please try to reload the your iframe.
//Reload iframe
$('#iframe').attr('src', $('#iframe').attr('src'));
Just try this... this may help you!!
DEMO...
You are trying to load the iframe from a button which itself is inside the iframe, it will never work that way. You should use window.location for this
$(function() {
$("#adduser1").click(function() {
window.location = 'adduser.jsp'
});
});
Hope this helps :)