I have a main page (actually a JSP) with an iframe inside it as;
<iframe name="abc_frame" id="abc_frame" src="about:blank" frameborder="0" scrolling="no"></iframe>
Now there are multiple links on the main page (rendered dynamically via JSP) which can try to set the src to some URL...
Now my question is,using jQuery (may be live()), can I override that in such a way that the "src" attribute for abc_frame would always have some particular value (e.g. "somefixedURL")
I cannot capture the link clicking, as it is completely dynamically created via some Java code and hence I am trying to override the iframe src ?
Use attr
$('#abc_frame').attr('src', url)
This way you can get and set every HTML tag attribute. Note that there is also .prop(). See .prop() vs .attr() about the differences. Short version: .attr() is used for attributes as they are written in HTML source code and .prop() is for all that JavaScript attached to the DOM element.
if you are using jQuery 1.6 and up, you want to use .prop() rather than .attr():
$('#abc_frame').prop('src', url)
See this question for an explanation of the differences.
While generating the links set the target to the iframes name property and you probably wont have to deal with jquery at all.
<a href="inventory.aspx" target="contentframe" title="Title Inventory">
<iframe id="iframe1" name="contentframe" ></iframe>
$(document).ready(function() {
$('#abc_frame').attr('src',url);
})
Setting src attribute didn't work for me.
The iframe didn't display the url.
What worked for me was:
window.open(url, "nameof_iframe");
Hope it helps someone.
<script type="text/javascript">
document.write(
"<iframe id='myframe' src='http://www.example.com/" +
window.location.search + "' height='100' width='100%' >"
)
</script>
This code takes the url-parameters (?a=1&b=2) from the page containing the iframe and attaches them to the base url of the iframe. It works for my purposes.
You cannot set FIX iframe's src or prevent javascript/form submit to change its location. However you can put script to onload of the page and change action of each dynamic link.
$(".excel").click(function () {
var t = $(this).closest(".tblGrid").attr("id");
window.frames["Iframe" + t].document.location.href = pagename + "?tbl=" + t;
});
this is what i use, no jquery needed for this. in this particular scenario for each table i have with an excel export icon this forces the iframe attached to that table to load the same page with a variable in the Query String that the page looks for, and if found response writes out a stream with an excel mimetype and includes the data for that table.
Related
Can you load a page into an iframe with JQuery? I have a page that creates a custom printable pdf and need it to load into an iframe to make it easier for the user. I use jquery to pull in all the variables otherwise I could have it load within the page. I am not sure what I am missing with this command to load the page within id="print_form_modal2"?
$.frameReady(function(){
$("#print_form").prepend('<div id="newDiv"></div>');
$('#newDiv').load("print_audit.php?auditID="+auditID+"&action=print&print_name="+print_name+"&print_orient="+print_orient+"&download_option="+download_option+"&type=pdf");
}));
<iframe id="print_form_modal2" name="iFrame" src="">
You could do it the painless way and just use HTML:
Make an <a>nchor with the href to your PDF.
Add an iframe with a name attribute (ex. name="iframe1")
Next, add a target="iframe1" to the <a>.
PLUNKER
Its simple enough to do what you're trying to do using just JavaScript and HTML
HTML:
<iframe id="print_form_modal2" name="iFrame">
JavaScript:
function openIframe() {
document.getElementById("print_form_modal2").setAttribute("src", "https://www.example.com/");
}
You can see the code in a CodePen here: http://codepen.io/anon/pen/VjbBbY
In your code you need to replace https://www.example.com/ with the source path for PDF you wish to display, and change when openIframe is called to suit your requirements.
Here's a link to the codepen example
What you want to do on document ready (or whatever event is relevant to your logic) get the iframe and using the attr method change its source property to point to whatever new/old source.
Like this:
$(document).ready(function() {
$('#iframe-container').attr('src','http://www.w3schools.com/tags/tag_iframe.asp');
});
I'm currently trying to customize OpenCms (java-based open source CMS) a bit, which is using the FCKEditor embedded, which is what I'm trying access using js / jQuery.
I try to fetch the html content of the iframe, however, always getting null as a return.
This is how I try to fetch the html content from the iframe:
var editFrame = document.getElementById('ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');
alert( $(editFrame).attr('id') ); // returns the correct id
alert( $(editFrame).contents().html() ); // returns null (!!)
Looking at the screenshot, the what I want to access is the 'LargeNews1/Teaser' html section, which currently holds the values "Newsline en...".
Below you can also see the html structure in Firebug.
However, $(editFrame).contents().html() returns null and I can't figure out why, whereas $(editFrame).attr('id') returns the correct id.
The iframe content / FCKEditor is on the same site/domain, no cross-site issues.
HTML code of iframe is at http://pastebin.com/hPuM7VUz
Updated:
Here's a solution that works:
var editArea = document.getElementById('ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame').contentWindow.document.getElementById('xEditingArea');
$(editArea).find('iframe:first').contents().find('html:first').find('body:first').html('some <b>new</b><br/> value');
.contents().html() doesn't work to get the HTML code of an IFRAME. You can do the following to get it:
$(editFrame).contents().find("html").html();
That should return all the HTML in the IFRAME for you. Or you can use "body" or "head" instead of "html" to get those sections too.
you can get the content as
$('#iframeID').contents().find('#someID').html();
but frame should be in the same domain refer http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/
I suggest replacing the first line with:
var editFrame = $('#ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');
...and the 2nd alert expression with:
editFrame.html()
If, on the other hand, you prefer to accomplish the same w/o jquery (much cooler, IMHO) could use only JavaScript:
var editFrame = document.getElementById('ta_OpenCmsHtml.LargeNews_1_.Teaser_1_.0___Frame');
alert(editFrame.innerHTML);
After trying a number of jQuery solutions that recommended using the option below, I discovered I was unable to get the actual <html> content including the parent tags.
$("#iframeId").contents().find("html").html()
This worked much better for me and I was able to fetch the entire <html>...</html> iframe content as a string.
document.getElementById('iframeId').contentWindow.document.documentElement.outerHTML
I think the FCKEditor has its own API see http://cksource.com/forums/viewtopic.php?f=6&t=8368
Looks like jQuery doesn't provide a method to fetch the entire HTML of an iFrame, however since it provides access to the native DOM element, a hybrid approach is possible:
$("iframe")[0].contentWindow.document.documentElement.outerHTML;
This will return iFrame's HTML including <THTML>, <HEAD> and <BODY>.
Your iframe:
<iframe style="width: 100%; height: 100%;" frameborder="0" aria-describedby="cke_88" title="Rich text editor, content" src="" tabindex="-1" allowtransparency="true"/>
We can get the data from this iframe as:
var content=$("iframe").contents().find('body').html();
alert(content);
I have a URL that resides on another domain, like this:
http://ads.adserver.com/ad?site=1233&zone=45435
When you type this URL in the browser, the result is HTML like this:
<img src="htt://ads.adserver.com/i/image.gif" border="0"/><br/>Test
The above renders as an image wrapped in a link with a second link below it.
I tried to capture this URL in a script tag and append it to the DOM, but it does not render the HTML above.
var ad_script = document.createElement('script');
ad_script.type = 'text/javascript';
ad_script.src = 'http://ads.adserver.com/ad?site=1233&zone=45435';
li.appendChild(ad_script);
Are there any other ways of invoking this URL and putting the result on the page? I can't use $.getScript() since I'm not invoking this in the global context. I need this HTML to appear exactly where I want it to appear.
EDIT: The only reason I am trying this route is that the third-party does not provide a JSON-P interface.
EDIT2: Unfortunately, I am not on an application server.
EDIT3: This is for iPhone.
You are limited to how you load this due to cross-domain issues .. an easy way would be to load the image in it's own iframe
<iframe src='http://ads.adserver.com/ad?site=1233&zone=45435' height='200px' width='200px' />
You'll want to use ajax for this. The easiest way might be jQuery's .load() method.
Assuming the element you want the content to go into has an id of holder, you would do
('#holder').load('http://ads.adserver.com/ad?site=1233&zone=45435')
It will put the contents of the webpage into your selected element. http://api.jquery.com/load/
edit: Sorry, forgot cross-site ajax limitations. You could instead set up a php page like:
if(isset($_GET['url'])){
echo file_get_contents($_GET['url'])
}
and then do
('#holder').load('http://yoursite.com/yourpage.php?url=http://ads.adserver.com/ad?site=1233&zone=45435')
Take the jsonp approach. use an actual script tag and put an executing javascript function as the response that adds that html markup to the dom. It will add it to the dom of the page where the script tag resides.
There are a number of jQuery ajax calls that can accomplish this, for example:
jQuery.get('http://ads.adserver.com/ad?site=1233&zone=45435', function(data){jQuery(updateElementQuery).html(data);});
Try to use jquery method 'load'
`$('#result').load(url, function(response) {
$('#my-li').append($('#result').html());
$('#result').html(null);
});`
... where #result is some hidden div
What I would like to do is change the content of a div based on the different links clicked on the same page. Can anyone point me in the correct direction? AFAIK it could be dangerous to insert scripts directly into a page, changing text works okay but it seems I'm not sure about scripts. The content of the scripts are embed codes for video streaming. I realise this may not be the right way to go about it. My attempt won't work because of escaping the '<,>' characters and passing the parameter only seems to accept text with no spaces.
The way I've attempted it is as follows (in pseudocode);
function changeVideo(script){ div.innerhtml=script;}
then links that change the content of the div;
<a href='#' onclick=changeVideo('<iframe src=justin.tv etc..></iframe>')>
<a href='#' onclick=changeVideo('<iframe src=ustream.tv etc..></iframe>')>
You could drop the use of JavaScript and create an iFrame with a specified name to host the content; while giving the links a target tag. Thus making any links with the target tag specified appear within the named iFrame.
However if you insist upon using JavaScript you could consider the use of AJAX.
I suggest you to locate your a elements with unobstrusive Javascript, with getElementById() for example.
Once you have got them in variables like, lets say, a1 and a2, and the iFrame is in variable iframe do a code like this.
// ...a1 and a2 are anchors and iframe is the frame.
var srcSwitch = function(e)
{
e.preventDefault(); // this will prevent the anchor from redirecting you
iframe.src = this.src; // this changes the iFrame‘s source
};
a1.addEventListener('click', srcSwitch, 1);
a2.addEventListener('click', srcSwitch, 1); // and we register event listeners.
With this code, there is no need to insert Javascript within HTML attributes and you must only put the script URL in the anchors SRC attributes.
Tell me how it goes, greetings.
I may have generalised the question too much.
So I want to embed a stream on clicking a link. If the link is something like a proper URL
http://Jimey.tv/mystream
the iframe works, but loads the whole page. But I want to use the stream embed code to get just the player
The embed code looks similar to;
<script type = text/javascript> channel='mychannel' w='620' h='400'</script><script type=text/javascript> src="jimmy.tv/embed.js></script>
My original JavaScript method doesn't work because of escaping the < characters, and passing the embedcode seems to be problamatic. Hopefully I've made this a bit clearer?
<script>
iframe1 = '<iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=xenema&popout_chat=true" height="301" width="221"></iframe>'
</script>
link 1
link 2
<div id="videos">diiiiv</div>
my code is
<a href="#" target="_blank" class="floatLeft" onclick="change('http://localhost/allwidgets/widgets.html');" >
function change(url)
{
alert(url);
document.getElementById("mainOuter").innerHTML=url;
}
Actually I want that url should go in innerHTML of mainOuter div and that page should display in that.
Please suggest....
Thanks
It sounds like you may actually want an iframe:
<iframe id="someIframe"></iframe>
document.getElementById("someIframe").src = url;
If you want to actually modify a DIV's innerHTML, then you need to use a AJAX request to get the desired HTML, then use innerHTML. Libraries can make this easier.
You can't do like this. There are to possible ways to do this.
Method 1
You can use an iframe and load the page corresponding to the url by giving iframe's source as the url.
Method 2
You can use .load method of jQuery to load a page using the url. Something like
$('#mainOuter').load(url);