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);
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 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
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.
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>
I have got the values by passing the query string in an iframe.src = "xyxz.jsp?name="+name+"&pass="+pass+"&id="+id.
I need to pass those values which i have got to another jsp page
<iframe src="xyz.jsp"></iframe>
How can i do that?
Your question is unclear, but I guess that you want to pass the querystring of the parent JSP page to the JSP page which is in an iframe of the parent JSP page. If so, then just print HttpServletRequest#getQueryString():
<iframe src="page.jsp?${pageContext.request.queryString}"></iframe>
That said, iframes are an extremely bad practice and very clumsy when all the pages are located at the same server. Rather use server side includes using <jsp:include>. This way the included JSP has access to the same request object.
Use Javascript to dynamically change the src attribute of frame
function changeSrc()
{
window.frames['testframe'].src = "xyxz.jsp?name="+name+"&pass="+pass+"&id="+id;
}
Is this what are you looking for?
according to your cooment to #Manjoor post you want to call javascript function which is defined inside iframe and pass the parameters to it, if that so check this post
Invoking JavaScript code in an iframe from the parent page