iFrame SRC from TextArea

2,066 · May 29, 2014

Hello gang,

I need to be able to display various content in an iFrame. Below is some code that works, sometimes... hence this post.

Some urls work, such as http://www.cnn.com

Others do not, such as most "Share" urls from YouTube. I have even pasted the Share code from one video to see if it works, nope

document.getElementById("iContent").src = "http://youtu.be/wupToqz1e2g";

I've already spent some time on Google, but I thought I'd post here as well.

Thanks for all info

<html>
<body>
<script>
function LoadContent() {
    try {
        var sContent = document.getElementById("txtContent").value;
	   
        if (IsURL(sContent) == true) {
            document.getElementById("iContent").src = sContent;
        }
        else {
            document.getElementById("iContent").src = "http://www.youtube.com/embed/gLeoJxkyXg4?autoplay=1&controls=0&loop=1";
        }
    }
    catch (Err) {
        //logException(err);
    }
}

function IsURL(url) {
    //http://stackoverflow.com/questions/1701898/how-to-detect-whether-a-string-is-in-url-format-using-javascript
   
    try {
        var strRegex = "^((https|http|ftp|rtsp|mms)?://)"
            + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" 
            + "(([0-9]{1,3}\.){3}[0-9]{1,3}" 
            + "|" 
            + "([0-9a-z_!~*'()-]+\.)*" 
            + "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." 
            + "[a-z]{2,6})" 
            + "(:[0-9]{1,4})?" 
            + "((/?)|" 
            + "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
        var re=new RegExp(strRegex);
        return re.test(url);
    }
    catch (Err) {
        //logException(Err);
    }
}
</script>	

<iframe id="iContent" width="420" height="315" src="https://www.youtube.com/embed/gLeoJxkyXg4?autoplay=1&controls=0&loop=1"></iframe>
<br/>
<textarea rows="3" cols="50" id="txtContent" onkeyup="LoadContent();" placeholder="Enter Something." ></textarea>
</body>
</html>

2,549 · May 30, 2014

Some sites like Facebook block iframes and there's no way to fix it.

2,066 · May 30, 2014

On 30/05/2014 at 02:07, Seahorsepip said:
Some sites like Facebook block iframes and there's no way to fix it.

Thanks, but that situation is not my concern. You're right, for those sites that don't allow this there is nothing I can do. However, for example a url from you tube (url below as example) when I paste it into my Facebook wall I get the preview picture, details, etc. But with the above code it does nothing. I am looking to recreate the same functionality as it happens in Facebook

http://www.youtube.com/watch?v=uDJPjLc9Xr4&feature=share&list=UUzwDRd4MlgucoBGNAzUEKHg&index=1

Thanks

10,720 · June 2, 2014

In the case of Facebook, when you paste a URL on your wall, Facebook extracts the preview image from the Open Graph image meta tag (if available), if you look in the source for that page you'll find this tag:



<meta property="og:image" content="https://i1.ytimg.com/vi/uDJPjLc9Xr4/maxresdefault.jpg">

20,536 · June 2, 2014

Yeah, you're going to have to parse the page on the server to pull out details like that, the client security model won't allow for it.

Also, that's a fairly sub-optimal way to validate a URL, I'd try using the methods provided by the browser (new URL('http://example.com/'); ) first, then fallback to something like that (And the browser object will sanitise and properly escape the URL to boot)

2,066 · June 2, 2014

Thanks people, I will look into these options.

Sign In

iFrame SRC from TextArea

Question

James Rose

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Seahorsepip Veteran

Link to comment

Share on other sites

James Rose

Link to comment

Share on other sites

+virtorio MVC

Link to comment

Share on other sites

The_Decryptor Veteran

Link to comment

Share on other sites

James Rose

Link to comment

Share on other sites

Recently Browsing 0 members

Similar Content

Posts

Recent Achievements

Popular Contributors

Tell a friend

Choose your Ad Blocker