Iframe With Added Content?
Jun 9, 2009I would like to know how can I load a page in a iframe but with some added things to it (like scripts, header, etc). Suppose I have this example :
Code:
<html>
<head>
[code].....
I would like to know how can I load a page in a iframe but with some added things to it (like scripts, header, etc). Suppose I have this example :
Code:
<html>
<head>
[code].....
I have spent a lot of time googling about this but I'm not sure exactly what to search for. I use jquery ajax to send a request to the server and then new content for a specific div is returned that the script then places in that div. All links with the css class "link" triggers this request.
The problem is that the returned content contains links with the css class "link" and they will not trigger the request. I'm guessing this has something to with that the script does not know about these new links that were added. Because the script runs when the page loads and only knows about the links that were on the original page.
How can I make the script ready for the new ones that are async added into the page?
<script type="text/javascript">
$(".link").click(function () {
$.ajax({
url: $(this).attr("href"),
[Code]....
I am trying to make a comment editor with iframe, and want to trigger the change of content inside iframe, the following code cant work.code....
View 5 Replies View RelatedI'm using JQuery to write content into an otherwise empty iframe like so:
Code:
$('#ifrmID').contents.find('html').html(htmlContent);
The content is coming from an Ajax request. The content gets used more than once on the page for other purposes which is why I don't simply change the iframe src--I have to do an ajax request regardless so I'm trying to avoid multiple calls.
After I load the content, I need modify the height of the iframe so it fits snuggly around the content.
Calculating the height isn't a problem with the exception that it's not always correct and I think it's because the calculation is happening before images have downloaded.
I don't seem to be able to rely on a `load` or `ready` event to delay the calculation. The load event is the only one that tiggers on a change of iframe content, but it doesn't see the new content.
Code:
$('iframe').each(function () {
$(this).load(function () {
alert($(this).contents().find('html').html());
});
});
This will output '<html><body></body></html>' even though I have successfully inserted different content.
Any suggestions on what I'm doing wrong, or if it's possible to do what I want reliably?
Note that a general JS solution will be appreciated as much as a JQuery one.
How would i change iframe content from another? ? I just need the 1 line code not a whole example, what i have atm is the page refreshes and a new variable is given i want the variable displayed on another iframe.
View 1 Replies View RelatedI am a little confused about this and whether this is an appropriate approach. I have put this together so far. What it does is display a different html page into the IFrame if the person clicks the link. However, this is not what I want to do. What I want to do, is if Windows XP is detected to display load1.html into the Iframe and if Windows Vista is detected to display load2.html into the iframe.
<style type="text/css">
<!--
iframe#ifrm {
[code]....
I have a situation where I'd like to read/parse the content
of a file I've read into an <IFRAME>. I've looked through
various FAQs and searched forums, and the closest I get to
accessing the file content is
myIframe.contentWindow.document.body.innerHTML
where myIframe is the node from getElementById(). But while
I can see the content of the file on my web page, I get an
empty string from the above reference. How do I get to the
file?
I am trying to get at the content of an iframe but it seems that the content is loading after the alert is fired:
index.php:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>iFrame test</title>
<script src="[URL]"></script>
<script type="text/javascript">
$(function() {
$('<iframe src="[URL]" id="the_iframe" name="upload_iframe" />').load(function(){
var txt = $('#the_iframe').contents().find('#inside_iframe').text();
alert(txt);
}).appendTo('body');
});
</script></head><body>
</body></html>
In test.php I just have:
<div id="inside_frame">this is some text</div>
I don't get any errors in the console and the alert() just returns an empty string. I've also tried just placing the iframe directly in the html and that gets the same result too.
I have:
var moreinfo ="";
moreinfo+= "here some content";
$("#divMoreInfo").html(moreinfo);
And this inserts "here some content" in a div called divMoreInfo.
Now divMoreInfo is placed inside an iframe while the rest of the programming has to be in the parent page... How do I insert moreinfo's contents in the iframe's div?
resizing an iframe to fit it's content.
Basically, I have 10 spreadsheet pages saved as htm files.
I am creating a page that enables me to view each of these htm files.
I need the iframe to be resized for each htm file.
This is my code:
<html>
<head>
<script language="javascript">
<!--
[Code]....
This seems to work but it has a few issues, It does not resize properly for every link, only some of them.
Is there anyway I can load a website into an iframe on my page like this:
<iframe src="http://www.page2.com" frameborder="no" width="410" height="600" name="worldFrame"></iframe>
and then change the visibility of elements on that page from my page?
I've been able to get the iFrame to resize to the content - see this link - it's pretty simple. My only problem, is if the user clicks a link so that another page is displayed, the iFrame doesn't resize. It will only resize when the parent page is reloaded. So, not sure what to do about that.
(I do work with someone who writes Javascript and PHP, so they would know how to implement it if I found a solution).
i got a page with menus on top and an iframe in the middle of this page. Now what i want to know is how can i change iframe's content when i click on the menu's hyperlinks. Like when i click the "About" in the menu i want to see about.html in iframe.
View 5 Replies View RelatedI have a page where I load in a template from another company via IFRAME, the template I cannot change, but on a certain page of the template within the iframe I would like to tell the user some extra information, but my page remains the same and only the information in the iframe reloads, so is there a way to tell when the iframe changes so i can innerHtml some extra info on certain parts?
View 3 Replies View RelatedI'M working on a web page. My main index got a fix menu bar (title bar + menu (buttons with over effects, etc).
I used table to place my content so it would have one big banner with buttons and two iframes that would show two different content.
I worked so far that my main index render the frame with their respective backgrounds all detailled in css, fonts, align etc etc.
Is it possible to create blocks of information, all with the same CSS and then, just making the buttons tell the iframe which content to show ? The back ground will never change, just the content. IS it possible ?
I have an iframe and a div on the same page. I would like to display the content of the iframe inside my div after iframe loading is completed ....
View 2 Replies View RelatedI am trying to access the content of an iframe. I have search google and read a couple of other post, but my problem is a little bit more complicated. I can't use the ...contents().find("whatever") function though the result is of content type text/plain. In other words: There is not HTML is the result. The result cannot be tampered with either. Because contents, html and text are not really helping me I thought to use a counter. Whenever the length would be more than 1 I would show the result. But that doesn't seem to work either.
View 2 Replies View RelatedI have a form in my page and I want to implement an autosave feature. For that, I submit all the fields in the form every 2 minutes via AJAX, so I can save a Draft.
The problem is, that the textarea used for the body of the message is modified to be a Rich Text Editor (with MceEdit). Thisdynamically generates an iframe that holds the styled text, and only populates the textarea with that content on sumbit.
So, I want to be able to read the iframe contents with jquery, so I can POST it via AJAX to the autosave method. I hope I've provided all the necessary details. If not, feel free to ask for more.
I am using a WYSIWYG web editor (Serif WebPlus X4; for a whole range of reasons - please don't turn this thread into a discussion of the pros and cons of WYSIWYG! ). It has a tool to create a site search facility, whereby you add a text box to accept the search terms, and specify an iFrame in which the results appear. The source of the iFrame is not specified as a page, but rather the content is generated and inserted by the search JavaScript that runs when the user searches the page.
I really don't want the results to be in an iFrame, because I think it looks a mess when the page and the iFrame both scroll. To avoid this, I'm trying to get the iFrame to resize to fit the results, so it won't need to scroll. (Of course, the alternative would be to change the JavaScript so the results are placed directly onto a page rather than in an iFrame, but because of the way the WYSIWYG editor works, that's less straightforward).
I've found many scripts online that would let me change the size of the iFrame based on its content, but they all assume that the content is coming from a file saved on the server, and work by checking the height of the file's content, and inserting that value as the height of the iFrame. Now, the problem is that when I use these scripts they cause the iFrame to become 0px high, I assume because the frame doesn't have a fixed source that can be measured, but rather gets its content fed in from the search JavaScript.
Can anyone help me figure out a way to resize the frame even though its content is dynamically generated as the page with the frame is loaded? I've copied below the search script and the html page with the iFrame that needs to resize. Ideally, whatever solution I use shouldn't involve editing the .js file I've attached, since this is generated automatically by the WYSIWYG program.
[Code]...
I am trying to figure out a way to position the content that comes up inside of an i-frame. I believe that Javascript is the way to go, but I'm very inexperience in coding JS and wanted to see if anyone could give some insight.
I would like to make the pages that appear inside my i-frame to hide the top 20 pixels; something like a negative margin. The idea is that I could put a banner there that will be invisible when the page in viewed in the i-frame, but will show up properly if a user views the page outside of the i-frame. Does anybody know if this is possible, or am I on the wrong track?
I have a main webpage with an iframe embedded inside:
PHP Code:
<IFRAME id="imagesframe" src="images_frame.php" width="100%"></IFRAME>
Now, I want to be able to reload the content of that iframe from a pop-up window. I tried the following JavaScript command inside the pop-up window:
PHP Code:
opener.document.getElementById("imagesframe").location.reload();
but when I call that command i get the following JavaScript error: ...
We use the services of an external company in our website. We load this content in via an iframe. Some of this content happens to be an image.
This image is only stored on the external company's site for a limited time. We need this image to be stored on our servers somehow. Because the content is loaded dynamically from another site it's a little more difficult to access via a server side script
I'm thinking it would go something like:
load in the html for the iframe into a variable,
(no idea how yet, I don't think 'include' works like that)
then scan through the file for the link to the image,
(would be easy with javascript selectors)
then request that url from them and save it as a file somewhere.
I can't think how i can do this easily with php nor ajax... any ideas?
This should work:
maybe something like, use javascript to find the element url, then send a request to another page with a server side script to handle saving the url
...but I'm thinking there might be a better way of doing it.
The people who made the application I'm supposed to be maintaining/extending didn't care for users with no javascript (i know, i know), so because other key functionality doesn't work without javascript (at current...but I'm rebuilding the whole thing at some point but this is a priority feature for asap) i'm not worrying about making sure it works for users without javascript.
I have to use onMouseOver to change the content of an iframe. I'm trying to use an array but I'm confused and I'm not really sure if what I'm doing is correct and it doesnt work.
here is part of my code..
var frame=new Array(6);
frame[0]="page1.html";
frame[1]="page2.html";
frame[2]="page3.html";
[code].....
I am using jquery.autoheight.js [URL] to adjust the height of the iframe according to content.
It works fine for the static content while loading. If I try to use the content with expand/collapse or display some content dynamically, its not adjusting according to the new content.
i have a small question .... Lets say i have a html web page withthe folowing code inside:
[Code]...
my script looks like this:
var doc = frames[0].document;
doc.open();
doc.write(data);
if($.browser.mozilla){
[code].....
"data" is a string with html content. this works quite good in all browsers but I wonder if there is a better solution.firefox doesn't load the content correctly if the content is too large and doc.close() is called too early.