I have:
index.html
and
test.html
and I could load my test.html with jquery load(); function to in index.html
but then my index.html style is broken that is why I want to load my test.html into index.html as iframe..
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>index.html</h1>
<div class="item">
load test.html here with iframe
</div>
<div class="test">
I'm a test div and I want to be in index.html in `item` class
</div>
to load html file into an iframe
<html>
<body>
<iframe src="test.html">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
What you could do is to specify only the content you want to load when using jQuery.load like this:
$( "#result" ).load( "test.html #container" );
Then it would only load the content of #container instead of everything (including the styles which might break your layout.
If you want to change an iframe src with jQuery you could use a click event like so:
jQuery( function() {
$( 'button' ).click( function( e ) {
e.preventDefault();
$( '#result' ).attr( 'src', 'test.html' );
} )
} )
But I think it would be better to use the first approach, trying to only load the content itself, not the whole HTML structure of test.html.
I hope that helped :)
Related
I have 2 pages. I loaded my second page inside my first page.
In the second page i have a link.
The problem is, when I click on the link in the second page, it opens in new tab.
How do I open this link in same page, like an iframe?
Here is my snippet:
$( document ).ready(function() {
$('#second').load('second.html');
});
#second{width:100%; height:300px; border:1px solid blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<title>First page</title>
</head>
<body>
<div id="second"></div>
<!--
THis is my second page code ////////
<html>
<head>second page</head>
<body>
click here !
</body>
</html>
-->
</body>
</html>
Name your iframe <iframe name="namedIf"></iframe>
and then in your anchor tag use target attribute <a href="link" target="namedIf"/>
But as the comments says, google doesn't allow you to iframe their content in your site.
UPDATE
As you're not using iframes, the only thing i can think of is to "intercept" any clicks to the anchor tags present on your loaded document and use the same function again to load it.
$(function() {
$('#second').load('second.html', function(){
$("#second a").click(function (e) {
e.preventDefault();
$("#second").load($(this).attr("href"));
});
});
});
So the code gets executed when your code has completed loading second.html into your document.
I am using some JQuery to load a div from another page to the current page, the problem I am having is that the content is the div does not exist until that page has loaded.
<div id="placeholder"></div>
What I am trying to do is load the page first (So the content goes into the div) and then I want to load the div in the current page.
Currently I have something which looks like this:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<div class="panel-body">
<div id="bar-chart-db" class="height-sm"></div>
</div>
<script>
$( "#bar-chart-db" ).load( "../index.aspx #placeholder" );
</script>
Is what I want to do possible and if it is, any suggestions?
you have to wrap the jquery in a document ready function:
$(function(){
$( "#bar-chart-db" ).load( "../index.aspx #placeholder" );
});
Here is something you might want to read: Document Ready Function
Let me start off by saying my bootstrap modal load remote works fine. My particular problem is that it loads the whole remote URL as the HTML result, and I just need some specific sections from that HTML. For instance, lets say my remote URL is like this:
<html lang="en">
<head>
{head content goes here}
</head>
<body>
{some content here}
<div id="myContent1">{more content here}</div>
...
<div id="myContent2">{even more content here}</div>
</body>
</html>
So, instead of loading all above html code inside my modal, I just want to display divs #myContent1 and #myContent2.
Use Jquery ajax functions:
$( "#myContent1" ).load( "ajax/test1.html" );
$( "#myContent2" ).load( "ajax/test2.html" );
Using page fragments you can load specific divs to specific divs.
For example
$('#mainContainer').load('loadpage.html #nav1div');
Will load stuff inside your mainContainer that appear inside the div nav1div from the loaded page ('loadpage.html'), for more info check out http://api.jquery.com/load/
I am using a hosted CMS that renders an iFrame within another iFrames. These iFrames are loaded from the same domain but since this is a hosted CMS I do not have access to these iFrames directly. Is it possible, using jQuery, to insert HTML content into the body tag of the iFrame with the id of re_contentIframe?
Here is how the code renders on my site:
<div class="editor">
<iframe id="editorf" frameborder="0" src="/ForumEditor.aspx?ForumID=2221&TopicID=-1&NoTemplate=False&Internal=False" style="display: inline;">
<html>
<head></head>
<body>
<!-- CODE -->
<iframe id="re_contentIframe" frameborder="0" src="javascript:'<html></html>';">
<html>
<head></head>
<body> <!-- THIS IS WHAT I WANT TO TARGET --> </body>
</html>
</iframe>
<!-- CODE -->
</body>
</html>
</iframe>
</div>
I tried using the following code but nothing happens with this code (including no errors):
$(function() {
$( "#test" ).click(function() {
$("#re_contentIframe").contents().find("body").html("<p>new HTML content goes here</p>");
});
});
The problem is that you are trying to access a nested frame.
The #re_contentIframe frame is nested within #editorf, which is subsequently nested within your document.
Try:
$('#re_contentIframe').contents().find('body').find('#editorf').contents()
Fiddle: http://jsfiddle.net/8VP4y/3/
haven't checked it ,might help :
var frameObject = document.getElementById('editorf');
var frameContent = frameObject.contentDocument ||
frameObject.contentWindow.document;
var insideIframe = frameContent.getElementById('re_contentIframe');
var insideIframeContent = insideIframeObject.contentDocument ||
insideIframeObject.contentWindow.document;
var $body = $('body',insideIframeContent);
$body.html('<div>contentupdated</div>');
Assume that I have following HTML file:
**
main.html
**
<html>
<body>
<ul>
<li>Element to drag</li>
</ul>
<iframe src="demo.html">
</iframe>
</body>
</html>
demo.html (iframe code)
<body class="iframe">
</body>
I'm using jquery UI for drag and drop (Link)
And assume that all javascript files are included in main.html and demo.html
Any help would be great helpful !!!
Thanks
I had the same problem and manage to do it this way.
Consider the draggable element in your main file normally and refer to the iframe droppable elements with
$( 'your-iframe' ).contents().find( 'elments-you-want-droppable' ).droppable({
// droppable settings here as normal
});