How to create infinit Iframe containing itself page? - javascript

So I try
document.write('<iframe src='+ location.href + ' width="468" height="60" ></iframe>');
But it seems not to be working at chrome...
This also does not work
<div id="main"></div>
function $(id)
{
return document.getElementById(id);
}
var div = document.createElement("iframe");
div.setAttribute("src", location.href);
div.setAttribute("width", "500");
div.setAttribute("height", "90");
$('main').appendChild(div);
document.write(location.href);
And this does not work
function $(id)
{
return document.getElementById(id);
}
document.write('<div id="main"></div>');
var div = document.createElement("iframe");
div.setAttribute("src", location.href);
div.setAttribute("width", "500");
div.setAttribute("height", "90");
$('main').appendChild(div);
document.write(location.href);

<iframe src="about:blank" onload="if(!this.t){this.t=1; var href=location.href.replace(/[\?\&]inf\=.+/i,''); href += href.indexOf('?') > -1 ? '&inf=' : '?inf='; this.src = href + Math.random();}"></iframe>
I tried on chrome.. seems ok :)
Edit
appended some regex for safe url

Looks like most browsers block that option, which is probably a good idea.
Tested with the code:
<iframe src="."></iframe>
On Chrome, I get this page:
http://jsbin.com/epimi4/

Related

javascript turn a YouTube link into embed video

I Have Many Links On My Page All Jotted Around In Random Places. If Have The Links Like This:
https://youtu.be/4tG274QuqHM
or
https://youtube.com/watch?v=4tG274QuqHM
or
Any Other YouTube Video Link Format
Is There Any Way In JavaScript To Get Any Form Of YouTube Link And Turn It Into A YouTube Embed Iframe, By Using JavaScript To Make It End Up Looking Like This;
<iframe width="420" height="345" src="http://www.youtube.com/embed/4tG274QuqHM?autoplay=0&autohide=1&controls=2&rel=0" frameborder="0" allowfullscreen="true"></iframe>
Could Anyone Fix This Code To Make It Work???
$(document).ready(function() {
$('a').each(function() {
var matches = $(this).attr("href").match(/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/);
if(matches){
$(this).attr("class","youtube-link");
}
});
$('a.youtube-link').each(function() {
var yt_url = this.href,
yt_id = yt_url.split('?v=')[1],
yt_id = yt_url.split('embed/')[1],
yt_title = $(this).text();
$(this).replaceWith('<iframe style="max-width:560px;max-height:315px;" width="600" height="600" src="http://www.youtube.com/embed/' + yt_id + '?rel=0" frameborder="0" allowfullscreen></iframe>');
});
});
I would check this link out. It's Google's documentation on a Youtube iFrame.
https://developers.google.com/youtube/player_parameters#Embedding_a_Player
You can simply extract the href value on click on the anchor tag and replace the existing anchor tag with a iframe tag.
https://youtube.com/watch?v=4tG274QuqHM
<br>
http://www.youtube.com/embed/XGSy3_Czz8k
<script>
$('a').click(function(e)
{
var target = $(this).attr('href');
var iframe = $('<iframe/>',{ width: "420", height: "315" , src : target});
$(this).replaceWith(iframe);
e.preventDefault();
});
</script>
Example : https://jsfiddle.net/4nqhqu03/

jQuery script not working inside iframe

I wanted to execute script inside iframe tag but it does not worked for me, tried all kind of possible ways but still facing the same problem.
link to jsFiddle
The content inside iframe is injected using script, style works perfect but my jQuery script is not working :( i don't know why...
can anyone solve my problem ??
Thanks.
code :
var htmlcontent = '<button id="btn">click me</button>';
var previewFrame2 = document.getElementById('preview');
var preview2 = previewFrame2.contentDocument || previewFrame2.contentWindow.document;
preview2.open();
preview2.write(htmlcontent);
preview2.close();
var $head = $("#preview").contents().find("head");
$head.html("<style> button { padding:10px; border:0px; background:green } </style>");
var $body = $("#preview").contents().find("body");
$body.append("<script src='http://code.jquery.com/jquery-1.12.0.min.js'><\/script><script type='text/javascript' > jQuery(document).ready(function() { jQuery('#btn').click(function() { alert('iam clicked') }); }); <\/script>");
<iframe id="preview" frameborder="0"></iframe>
<script src='http://code.jquery.com/jquery-1.12.0.min.js'></script>

Print a document with JavaScript

I want to open a print dialog for a file(docx,pdf,...) via a SharePoint Workflow. There I call a URL with GET and pass the URL of the file after the ? like this:
http://www.sharepoint_intranet.com/print.html?link-to-file.pdf
EDIT: I also tried:
<script type="text/javascript">
//Get the URL of the file
var urlOfFile = window.location.search.replace("?", "");
document.write("<iframe id=" + "printDocument" + " src=" + "'" + urlOfFile + "'" + " width=" + "600" + " height=" + "400" + "></iframe>");
window.frames['printDocument'].focus();
window.frames['printDocument'].print();
</script>
The Print Dialog is opening and in the print options there is the Point "Only selected Frame" selected but when I press the print button nothing will happen.
Thanks for any help!
you can put in the body of the html
<body onLoad="window.print();">
so the page is opened already prints the document.
The issue is that the new url doesn't start loading until the current script block has finished executing. Therefore when you call w.print(), the new window is currently blank.
Try:
<script type="text/javascript">
//Get the URL of the file
var urlOfFile = window.location.search.replace("?", "");
//print
var w = window.open(urlOfFile);
w.onload = function() {
w.print();
}
</script>
EDIT: I didn't read the question properly! The above technique only works for html. The way to solve this is to use an iframe and if we are using an iframe we might as well dispense with the popups entirely. The following code creates an iframe with a source set to the desired document, attaches the iframe to the page (but keeps it invisible), prints the contents of the iframe and finally removes the iframe once we've finished with it. Only tested in Chrome but I'm fairly confident that it'll work in other browsers.
<script type="text/javascript">
//Get the URL of the file
var urlOfFile = window.location.search.replace("?", "");
//print
var iframe = document.createElement('iframe');
iframe.src = urlOfFile;
iframe.style.display = "none";
var iFrameLoaded = function() {
iframe.contentWindow.print();
iframe.parentNode.removeChild(iframe);
};
if (iframe.attachEvent) iframe.attachEvent('onload', iFrameLoaded); // for IE
else if(iframe.addEventListener) iframe.addEventListener('load', iFrameLoaded, false); // for most other browsers
else iframe.onload = iFrameLoaded; // just in case there's a browser not covered by the first two
window.onload = function() {
document.body.appendChild(iframe);
};
</script>
where we can give the path of the file like("abc.doc"/"abc.xls")
var urlOfFile = window.location.search.replace("?", "");

Rendering Youtube Video in a WYSIWYG

I am creating a custom WYSIWYG from scratch using JavaScript. All of it is working fine (like inserting pictures), but when I click on submit and the content gets added to my database, the YouTube video gets inserted like this:
<div><br></div><div><br><div><br></div></div>
I have created a JavaScript file that the WYSIWYG parses to:
function iImage(){
var imgSrc = prompt('Enter image location', '');
if (imgSrc != null){
richTextField.document.execCommand('insertimage', false, imgSrc);
}
}
function iVideo(){
var urlPrompt = prompt("Enter Youtube Url:", "http://");
var urlReplace = urlPrompt.replace("watch?v=", "embed/");
var embed = '<iframe src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390">';
if($.browser.msie){
richTextField.document.createRange().pasteHTML(embed);
}else{
richTextField.document.execCommand("Inserthtml", false, embed);
}
}
function submit_form(){
var theForm = document.getElementById("blogForm");
theForm.elements["blogbody"].value = window.frames['richTextField'].document.body.innerHTML;
theForm.submit();
}
You can see that my iImage function works, but not my iVideo.
Can anyone help?
Just to let you know i have edited my script to this...
function iVideo(){
var urlPrompt = prompt("Enter Youtube Url:", "http://");
var urlReplace = urlPrompt.replace("http://www.youtube.com/watch?v=", "http://www.youtube.com/embed/");
var embed = '<iframe src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390"></iframe>';
if($.browser.msie){
richTextField.document.createRange().pasteHTML(embed);
}else{
richTextField.document.execCommand("Inserthtml", false, embed);
}
}
but still no joy
I have got it. This is the code below
function iVideo(){
var urlPrompt = prompt("Enter Youtube Url:", "http://");
var urlReplace = urlPrompt.replace("watch?v=", "embed/");
var embed = '<iframe title="YouTube video player" src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390">';
if(embed != null){
richTextField.document.execCommand("Inserthtml", false, embed);`
}
}
It working on my sites right now.
Ultimate
The reason you don't see a Youtube.com is because it will be added by you upon uploading. In the form where you write content you intend to upload to your site, You are to click on a Add Video link which will tricker off the first line in the code to popup a window requesting you to submit your Youtube video link, which looks something like http://youtube.com/theVideoLink. The link you add will then be placed where you have src="'+urlReplace+'" that is.
Well, I am a begginner at javascript, but I don't see anywhere were it adds youtube.com to it, all I see is the watch?v=.
As I said, a beginners opinion.
Are you able to first try a hardcoded/static version like below first?
- might be just syntax or one of your variables not set.
<script type="text/javascript">
function iVideo(){
var youtubeiframe='<iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/AsbagZvkrbo" frameborder="0"></iframe>';
richTextField.document.execCommand ("insertHTML", false, youtubeiframe);
}
</script>

JavaScript - Jump to anchor

I'm trying to open a div with a jump to the anchor. The opening part is working but it's not jumping to the named anchor
This is my script:
<script type="text/javascript">
function spoil(id){
if (document.getElementById) {
var divid = document.getElementById(id);
divid.style.display = (divid.style.display = 'block');
window.location = '#' + id;
}
}
</script>
<a href="http://example.com" onclick="spoil('thanks');" title="hello">
<img src="images/gfx.png" alt="world" width="300" height="300"/>
</a>
Any ideas what's wrong with it?
Cheers.
Did you try window.location.hash = '#'+id;?
Looks like you're unhiding a spoiler div. If so, you can scroll the element into view as follows:
function spoil(id) {
var divid = document.getElementById(id);
divid.style.display = 'block';
divid.scrollIntoView(true);
return false;
}
...
<img src="images/gfx.png" alt="world" width="300" height="300"/>

Categories