I am generating iframe and putting this generated iframe code into a textfield so that user can copy and use it.
iframe first created here:
<div id="iframecode">
<iframe src="http://www.page.com/?arg1=A&arg2=B"> </iframe>
</div>
i am taking it with jquery like this:
var snippet = $('#iframecode').html();
snippet.replace('&','%26');
$('#wsnippet').val(snippet);
and putting here:
<textarea id="wsnippet"></textarea>
but snipper is still:
<iframe src="http://www.page.com/?arg1=A&arg2=B"> </iframe>
But even if i encode the ampersand, it still ends being &. how can I encode this so that user can copy and paste and use it?
The user can copy and paste and use that already. & is the correct encoding for an ampersand in an HTML attribute.
If you don't need to grab all the code from the div, and can just get the src and manually create the code for the iframe you could do the following:
var src = $('#iframecode iframe').attr('src');
var snippet = "<iframe src=\"" + src + "\"></iframe>";
$('#wsnippet').val(snippet);
Related
I am not able to figure this out for a while now.
I want to use super script in Alt attribute of an image. The code that I have made works fine when I use it with
document.write
innerHTML
because I understand that the HTML parser when reads the script reads the <sup></sup> tags and makes the text between it as superscript. But how to make the Alt attribute or rather an <input> tag have a superscript value.
I want something like this:
<input type="text" value="Hi, this is my 1<sup>st</sup> award">
to output on the screen as an input box with pre-filled text
I have made the following code, but cannot figure it out to put it in place:
<body>
<img src="test.jpg" height="400px" width="500px" alt=''>
<script type="text/javascript">
var title = "Test String having 1st";
var one = "st";
one='1'+one.sup();
title = title.replace(/1st/g, one);
document.getElementsByTagName('img')[0].setAttribute('alt',title);
</script>
</body>
For easier solution you can use an editor and remove the toolbar and set the html content of it, here is an example editor https://mindmup.github.io/bootstrap-wysiwyg/ , you can easily turn off the toolbar and then add your desired html to it.
For alt you can use the on error attribute and call a custom attribute on it. Let me know if you need any further elaboration.
document.getElementById("id").innerHTML = "<div>new div</div>";
writes a new div element no problem, however a string from json:
document.getElementById("id").innerHTML = jsonData.data.children[i].data.media.oembed.html;
is always written as text with quotes!
(ie: "<iframe></iframe").
yielding:
<div id="id">
"<iframe></iframe>"
</div>
and not
<div id="id">
<iframe></iframe>
</div> //as expected
I don't understand why. I want to write this string to el.innerHTML as a string without quotes so it acts like a simple element.
data from reddit.json
sample:
html: "<iframe class="embedly-embed" src="//cdn.embedly.com/widgets/media.html?src=http%3A%2F%2Fwww.youtube.com%2Fembed%2FJq9JMm9h9cA%3Ffeature%3Doembed&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DJq9JMm9h9cA&image=http%3A%2F%2Fi.ytimg.com%2Fvi%2FJq9JMm9h9cA%2Fhqdefault.jpg&key=2aa3c4d5f3de4f5b9120b660ad850dc9&type=text%2Fhtml&schema=youtube" width="600" height="450" scrolling="no" frameborder="0" allowfullscreen></iframe>"provider_name: "YouTube"provider_url: "http://www.youtube.com/"thumbnail_height: 360thumbnail_url: "http://i.ytimg.com/vi/Jq9JMm9h9cA/hqdefault.jpg"thumbnail_width: 480title: "Good Doggy"type: "video"url: "http://www.youtube.com/watch?v=Jq9JMm9h9cA"version: "1.0"width: 600__proto__: Objecttype: "youtu.be"__proto__: Object
The html property that you are accessing is XML encoded:
"html": "<iframe class=\"embedly-embed\" src=\"https://cdn.emb......
Note the < there at the beginning.
In order to use it as HTML, you'll need to decode it. One way you can do this is to assign it to .innerHTML, retrieve it as text, and then assign it to .innerHTML again:
var el = document.getElementById("id");
el.innerHTML = jsonData.data.children[i].data.media.oembed.html;
el.innerHTML = el.textContent; // assign it for a second time
Obligatory warning: Make sure you darn well trust the source of the content you are using here. This opens your site wide up for an XSS attack if the source is untrustworthy.
I am using knockoutjs and need a way to display raw html inside a text area. Is is stored in my database as encoded html e.g.
<object width="640" .....
But I want it to be displayed as
<object width="640"
for the user to edit.
I guess you are using text or value binding in textarea if you change it to html it will work as you needed:
<textarea data-bind="html: data"></textarea>
Here is an example: http://jsfiddle.net/vyshniakov/qTRSX/
If your html is already escaped then you're all set, see demo
I have an iframe which includes src like this:
<iframe id="frame1" src="/jsp/transfer/a.jsp?isChange=true&bizId="+bizId></iframe>
bizId is a number. For example:
src = "/jsp/transfer/a.jsp?isChange=true&bizId=10"
I notice that Javascript will make put bizId's value in quotes: "10", "null", etc. I want to get the actual numeric value, not a string. Why is it represented as a string? What should I do?
If I understood your problem right (especially your last comment), you need to do this:
<iframe id="frame1" src="/jsp/transfer/a.jsp?isChange=true&bizId=<%=bizId>"></iframe>
Explanation:
<%= variable > - is a JSP syntax for inserting variables from JSP context into rendered HTML. This code (<%= variable >) will be replaced fully by contents of variable.
Added: (in response to comment)
If you need to put some variable into JavaScript file which is included from your original JSP file, you wont be able to use <%= variable > syntax in it. However, here is what you can do:
[yourjsp.jsp]
<script>
var bizId = <%=bizId>;
</script>
...
<script src="yourjavascript.js"></script>
[yourjavascript.js]
function someMethod() {
alert(bizId);
}
Basically, JSP code will be replaced, and you will define a global javascript variable called bizId containing the value of server-side bizId. Then, any other javascript code can use that variable.
in JS :
window.frames["myIframe"].src = "/jsp/transfer/a.jsp?isChange=true&bizId="+bizId;
you Can't add to the src something like +param.
option 1 ) via server side
option 2) via Js - change the SRC.
edit
<iframe name="myIframe" id="frame1" src=""></iframe>
in the bottom of the page :
<script type="text/javascript">
var bizId=444;
window.onload = function() {
window.frames["myIframe"].src = "/jsp/transfer/a.jsp?isChange=true&bizId="+bizId;
};
</script>
I want to make a URL like: www.mysite.com?q=name
From there, it will place in HTML:
<p align="center"><img src="image/**name**.png" alt="Logo" /></p>
What would be the jQuery attributes to do this? I am still new to jQuery and trying to learn.
assign a Id to your img element and do:
$('#image-id').attr('src', 'image/<name>.png');
Where you replace #image-id with the ID you assigned to your element and has to be extracted from the URL parameters
To extract the from your Querystring you could use this plugin (or - just look at the code and take what you need)
So the complete script would look like this:
$('#image-id').attr('src', 'image/' + $.getURLParam('name') + '.png');
You should assign an id to your img to identify it:
<p align="center"><img id="logoImg" src="image/**name**.png" alt="Logo" /></p>
Then use a jQuery selector on this id to change the src attribute based on your URL parameter. The URL String is split on the q= text and the value taken from it.
$('#logoImg').attr('src', 'image/' + document.URL.split('q=')[1] +'.png');
Best way is to just use the plugin mentioned by tigraine, but if you want to parse it yourself, you can access the params via window.location.search