I'm a beginner at HTML and JavaScript. And trying to encode a HTML file to Base64 code and then put that encoded string into <iframe src=" ENCODED STRING HERE" from another HTML file.
What I'm trying to do here is put encoded string into popup iframe like below capture to make it visible,
var i_frame_98c3be4abbe943db99555415352b65f5 = $('<iframe src="ENCODED STRING FROM HTML FILE" width="500" style="border:none !important;" height="300"></iframe>')[0];
However, I don't know how to.
I know there is encode/decode website base64encode.org but I have to do it by hand. I want to make it be encoded directly and put the code in the iframe src when I open up the file.
Is there any ideas or functionality in html to encode directly?
p.s. I can edit to upload html code if you want to see.
https://www.w3schools.com/jsref/jsref_encodeURI.asp has a good reference to encode URI.
I will also to checkout the solution here to set the src value of the iframe : dynamically set iframe src
Demo jsfiddle: https://jsfiddle.net/np7hp5jo/1/
function appendHtml(el, str) {
var div = document.createElement('div');
div.innerHTML = str;
while (div.children.length > 0) {
el.appendChild(div.children[0]);
}
}
var encodedUrl = encodeURI('https://www.lifehacker.com.au/?r=US');
var html = '<iframe id="myIframe" src="'+encodedUrl+'" onLoad="iframeDidLoad();"></iframe>';
appendHtml(document.body, html); // "body" has two more children - h1 and span.
Happy learning.
Related
We have created an image gallery addon for Page builder
which displays images as gallery like so:
<img class="sppb-img-responsive" src="'.JUri::base(true).'/'.$value->thumb.'" alt="' . $value->title . '">
But the problem is that when it uses an external image link
it returns an error like in this example:
<img class="sppb-img-responsive" src="/dev/ibwintalldev/https://cdn.pixabay.com/photo/2015/05/15/14/38/computer-768608_1280.jpg" alt="test">
Is there any way to detect this problem so as to fix this?
Or to check if the image has an external link?
Thanks
Lahmar
Why the src tag contains /dev/ibwintalldev/, because of which image is not displaying. Remove it and try.
<html>
<body>
<img class="sppb-img-responsive"
src="https://cdn.pixabay.com/photo/2015/05/15/14/38/computer-768608_1280.jpg"
alt="test">
</body>
</html>
You can remove the unwanted text before https: like so in javascript:
// returns all images on page
images = document.getElementsByTagName("img")
for (let img of images) {
// replaces extra text from the src
img.src = img.src.replace(/(.+?)(?>http)/, "")
}
Regex explanation:
(.+?) matches everything (if any) up to what follows this (i.e. http) and adds to matching group
(?=http) looks ahead for pattern http (but doesn't include in matching group so doesn't get replaced)
The following shows the regex working:
let img = new Image;
img.src="/dev/ibwintalldev/https://cdn.pixabay.com/photo/2015/05/15/14/38/computer-768608_1280.jpg";
// we apply the regex
img.src = img.src.replace(/(.+?)(?=http)/, "")
console.log(img.src);
I currently have a code working where i can add a class based on the url of a page using jquery. However I would like add an image to a div instead of just adding a class. I'm not as proficient in java-script as I could be but I think there is probably a pretty simple solution. The code that doesn't work is
if (window.location.href.indexOf('Locate_an_eyecare_professional') > -1) {
var img = document.createElement("img");
img.src = '~/Content/Images/Template 5A Filmstrip.jpg" />';
}
the code that works right now that I dont want to use is
if (window.location.href.indexOf('Locate_an_eyecare_professional') > -1) {
var $body = $('body');
$body.addClass('campaign');
}
How can apply what I do know that works to what I am trying to get to work?
If for some reason you don't want to use jQuery for this part, you just need to append the element to the body of the html document (or wherever you want it to end up) like so:
Javascript Code
if (window.location.href.indexOf('Locate_an_eyecare_professional') > -1) {
var body = document.getElementsByTagName("BODY")[0];
var img = document.createElement("img");
img.className = 'img-responsive'
img.src = '~/Content/Images/Template 5A Filmstrip.jpg';
body.appendChild(img);
}
You can add a <img> to any element using the jQuery .append() function in the following way:
var imageToAppend = '<img src="http://example.com/img.png" height="200" width="200"/>';
$('#myElementId').append(imageToAppend); //This will append you HTML to the div with id "myElementId"
You can read more about this here: http://api.jquery.com/append/
Happy coding! =]
You should use the element where you need to append (prepend) the image element so the code will look something like:
$("base element selector").append(img);
but you need to consider that the address of the image source may not be correct from the browser point of view - consider the page is hosted in application like http://server.com//applicationgroup/applicationroot/Content/Images/.....jpg may not be pointed with ~/Content/Images/.....jpg you rather need to translate the address to the full server address on the server side.
In my case I just had to remove "~" from:
<img src="~/assets/icons/ic_chevron2.svg" class="rot-90" />
resulting in:
<img src="/assets/icons/ic_chevron2.svg" class="rot-90" />
I have a site that has a banner at the top of the page. I've started to overhaul my HTML structure and am now getting various pieces of information that populate the site out of an XML file. My HTML that uses the jQuery is:
<script>
function myExampleSite()
{
var myURL = window.location.href;
var dashIndex = myURL.lastIndexOf("-");
var dotIndex = myURL.lastIndexOf(".");
var result = myURL.substring(dashIndex + 1, dotIndex);
return result;
}
var exampleSite = myExampleSite();
</script>
<script>
var root = null;
$(document).ready(function ()
{
$.get("Status_Pages.xml",
function (xml)
{
root = $(xml).find("site[name='" + exampleSite + "']");
result = $(root).find("headerImage");
$("td#headerImage").html($(result).text());
var imageSrc=$(root).find("headerImage").text();
$(".PageHeader img").attr("src",imageSrc);
result = $(root).find("version");
$("td#version").html($(result).text());
result = $(root).find("status");
$("td#status").html($(result).text());
result = $(root).find("networkNotes");
$("td#networkNotes").html($(result).text());
....etc etc
});
});
</script>
My XML file looks like this.
<sites>
<site name="Template">
<headerImage>images/template-header.png</headerImage>
<productVersion>[Version goes here]</productVersion>
<systemStatus color="green">Normal</systemStatus>
<networkNotes>System status is normal</networkNotes>
</site>
</sites>
I have several <site>s that all have their own data that will populate different areas of individual sites. I've ran into some snags though.
The first snag is how it currently obtains its header image:
html
<div class="container">
<div class "PageHeader"> <!-- Header image read from XML file -->
<img border="0" src=""/>
</div>
Right now it's hard-coded to be the template header image, but I need to make that generic and read the XML value for that site. So instead of being hard-coded as images/template-header.png it would read the XML value for the current site, which is still going to be the template header - but it won't for every page.
How can I read in the image string to populate my HTML so that each site has a different image depending on what's in the XML?
Edit: Edited code to match current issue. Currently, I just get a broken image, but I can still change it back to the hard-coded image URL (images/template-header.png) and it works.
As you already have the code that can extract the image URL information from the XML, which is
result = $(root).find("headerImage");
$("td#headerImage").html($(result).text());
It's now a matter of attaching that URL, to the image tag. We need to select the object, and then simply change it's src attribute. With jQuery this is actually pretty easy. It'll look something like
var root = $(xml).find("site[name='" + site + "']");
//get the image url from the xml
var imageSrc=$(root).find("headerImage").text()
//get all the images in class .PageHeader, and change the src
$(".PageHeader img").attr("src",imageSrc)
And it should work
Example
In conclusion, if you already have some values you want to put in HTML tags dynamically, it's pretty easy. There's .html("<b>bold</b>") for content, there's .attr("attrName","attrValue") for general attributes. .css("background","red") for changing CSS directly. There's also some class modifying stuff that would be useful in the future.
I want to display my html string in this iFrame.
Actually I am confused whether it should be displayed in iFrame or Div.
Code:
$("body").append("\
<div id='wikiframe'>\
<div id='wikiframe_veil' style=''>\
<p>Loading...</p>\
</div>\
<iframe id='wikiIDframe'></iframe>\
</div>"
);
I want to display HTML which is in a string s="<body>....</body>
In this iFrame how do I Do it. Could any body help me with that.
You can append your string s to your iframe by doing the following:
jQuery
var s = '<body><div>hello</div></body>'; // example s string
var textBody = $(s); // make s into jquery object
var iframeBody = $('#wikiIDframe').contents().find('body'); // get the body from the iframe
iframeBody.append(textBody.html()); //append s html into iframe
Example
An iframe is used to embed another document within the current HTML document.Which means if you want see a webpage inside a webpage, u can use iframe.
<iframe src="http://www.stackoverflow.com"></iframe>
see this example http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe
If you want to display your text then use a div instead.In jquery you can use it like the below code
$("#your_div_id").html("yourstring here");
Has anyone thought about this?
HTML
<iframe id="iframe" style="width:500px;height:400px;"></iframe>
JS
var myHTML = "<div id='wikiframe'><div id='wikiframe_veil' style=''><p>Loading...</p></div><iframe id='wikiIDframe'></iframe></div>";
document.getElementById('iframe').src = 'data:text/html,<html><body>' + myHTML + '</body></html>';
Try it on http://jsfiddle.net/Kqd8R/1/
Actually what i'm doing is to find the <img> image tags and get its src attribute to change them.
I already got upto this point but the problem more is: To get the edited the html source back (to put into the database.)
To say more brief & clearly, i'm about to grab some Dynamic Html Containers and then change the image paths and save the whole source chunk back.
For brief example if i search inside $(div.container).html() on this:
<div class="container">
<..> .. </..>
<..>
<img src="images/apple.jpg" />
<..>
<img src="images/banana.jpg" />
</..>
</..>
</div>
Firstly, lets say <..> represent any of not previously knowable html tags.
Then i will get:
var dom_contents = $("div.container").html();
Now i got the original html source inside the target container <div>
Then lets say i need to change each <img src with sample/ for its folder. It will then be fruits/apple.jpg and fruits/banana.jpg.. etc.
I still getting some of the stuffs like:
$("div.container).each(function() {
var arr = $(this).find("img");
for (var i=0; i<arr.length; i++) {
var img_src = $(arr[i]).attr("src");
/*
* I NEED TO CHANGE THE IMAGE SRC HERE
*/
}
});
** Finally, i need to save this the whole edited html source into the database. **
So how do i change the <img src='' .. and
How do i get this whole edited html source, back from the jQuery?
Amend the source attribute for each image as follows. You don't need to write the html back. The source html will be updated:
$("div.container").each(function() {
$(this).find("img").each(function() {
$(this).attr("src", "/image/url/file.png");
});
});
To get the html source of the container, use the following:
$("div.container").html();
This will set the attribute:
$(arr[i]).attr("src", mynewsrcvalue);
Once you're done just send the innerHTML (or .html()) back in an AJAX request. But if you want this stuff in a database, why not just manipulate the source on the server side in the first place?