• 0

iFrame SRC from TextArea

Asked by James Rose,

 Share

Question

Veteran

James Rose

Posted
Posted

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>
Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0
Grand Master

Seahorsepip Veteran

Posted
  • Veteran
Posted

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

Link to comment
Share on other sites
  • 0
Veteran

James Rose

Posted
  • Author
Posted

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

Link to comment
Share on other sites
  • 0
Grand Master

+virtorio MVC

Posted
  • MVC
Posted
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">

Link to comment
Share on other sites
  • 0
Grand Master

The_Decryptor Veteran

Posted
  • Veteran
Posted

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)

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing