CODEWITHSUNDEEP
javascriptangularjsiframecharacter-encodingascii
Piccaza De
Piccaza De

Reputation: 519

Javascript file content is getting encoded in front end

In my javascript file there is a mapping of each currency symbol with its decimal code, as below : 

var currency_symbols = {
    'EUR':{
        'symbol':'€', // Euro
        'isPrefix':true
    },
    'CRC':{
        'symbol':'₡', // Costa Rican Colón
        'isPrefix':true
    },
    'GBP':{
        'symbol':'₤', // British Pound Sterling
        'isPrefix':true
    },
    'ILS':{
        'symbol':'₪', // Israeli New Sheqel
        'isPrefix':true
    },
    'INR':{
        'symbol':'₹', // Indian Rupee
        'isPrefix':true
    },
    'KRW':{
        'symbol':'₩', // South Korean Won
        'isPrefix':true
    },
    'NGN':{
        'symbol':'₦', // Nigerian Naira
        'isPrefix':true
    },
    'PHP':{
        'symbol':'₱', // Philippine Peso
        'isPrefix':true
    },
    'PYG':{
        'symbol':'₲', // Paraguayan Guarani
        'isPrefix':true
    },
    'UAH':{
        'symbol':'₴', // Ukrainian Hryvnia
        'isPrefix':true
    },
    'VND':{
        'symbol':'₫', // Vietnamese Dong
        'isPrefix':true
    }
};

Which I will be using to display currency in different format. When I am loading my web application the javascript file is getting loaded very properly and rendering perfectly. But when I am loading my application in an iFrame the code symbol decimal value is becoming as follows:

'EUR':{
        'symbol':'€', // Euro
        'isPrefix':true
    },
    'CRC':{
        'symbol':'₡', // Costa Rican Colón
        'isPrefix':true
    },
    'GBP':{
        'symbol':'£', // British Pound Sterling
        'isPrefix':true
    },
    'ILS':{
        'symbol':'₪', // Israeli New Sheqel
        'isPrefix':true
    },
    'INR':{
        'symbol':'₹', // Indian Rupee
        'isPrefix':true
    },
    'JPY':{
        'symbol':'Â¥', // Japanese Yen
        'isPrefix':true
    },
    'KRW':{
        'symbol':'â‚©', // South Korean Won
        'isPrefix':true
    },
    'NGN':{
        'symbol':'₦', // Nigerian Naira
        'isPrefix':true
    },
    'PHP':{
        'symbol':'₱', // Philippine Peso
        'isPrefix':true
    },
    'PLN':{
        'symbol':'zł', // Polish Zloty
        'isPrefix':true
    },
    'PYG':{
        'symbol':'₲', // Paraguayan Guarani
        'isPrefix':true
    },
    'THB':{
        'symbol':'฿', // Thai Baht
        'isPrefix':true
    },
    'UAH':{
        'symbol':'â‚´', // Ukrainian Hryvnia
        'isPrefix':true
    },
    'VND':{
        'symbol':'â‚«', // Vietnamese Dong
        'isPrefix':true
    }

And due to this the not able to render the currency code properly, how to handle this? What is the root cause of this issue. Is this an expected behaviour? What is the best practice to resolve this issue.

Thank you so much for all suggestions

Upvotes: 0

Views: 303

Answers (1)

Naren Murali
Naren Murali

Reputation: 58199

If you define the encoding of the content inside the IFrame.

Explanation (Source: IFrame Encoding):

The page inside the iframe is completely independent of the "outer" page and it can have whatever charset you want. In other words, each page should specify its own charset (and make sure it's actually encoded in that charset).

So you can define the encoding inside the IFrame like so I guess.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        Test
    </body>
</html>

here is working example, the contents getting rendered fine, if you are still facing the issue, please use the below JSFiddle and share it back.

JSFiddle Demo

Upvotes: 0

Related Questions