I want my users to open their desired sites from my website, for this manner I need to insert a variable in src of iframe which change by user input strings.
Indeed I need a type of code like bellow:
<html>
<body>
<script type="text/javascript">
var userInput_stringVariable= "this part is user desired input string" ;
var adress= "https://en.wikipedia.org/wiki/" + userInput_stringVariable ;
</script>
<iframe src=adress width="100%" height="100%" frameborder="0"></iframe>
</body>
</html>
This code doesn't work, while I need a code like this to work with!
A textfield where user can enter whatever they would like to search on wikipedia or whatever website you want, a submit button which will call a function after it is clicked. answer.value will give the value of textfield and it's concatenated with website initial url.
HTML
<input type="text" name="inputField" id="answer" placeholder="Enter what you wanna search">
<button type="button" name="button" onclick="mySubmit()">Submit</button>
<iframe id="search" src="" width="100%" height="100%" frameborder="0"></iframe>
Script
<script>
function mySubmit() {
let getInput = answer.value;
var address;
address = "https://en.wikipedia.org/wiki/" + getInput;
document.getElementById('search').src = address;
}
</script>
Here is a function that will probably do what you want:
<script type="text/javascript">
function selectPage() {
var userImput_stringVariable = prompt("desired imput string");
if (userImput_stringVariable != null) {
document.getElementById("getPage").innerHTML =
"<iframe width='100%' height='100%' src='https://en.wikipedia.org/wiki/" + userImput_stringVariable + "'></iframe>";
}
}
</script>
Just add
<body onload="selectPage()">
somewhere in the body so the function runs when the page does.
It'll open a prompt, the user then has to enter the address.
Also you'll need this in the body too:
<p id="getPage"></p>
It creates a paragraph with the contents of the iframe within the fuction.
Related
How do I make that when I click on a button / link instead of a page, that the button / link shows the source codes of a page in the iframe it targets? On an iframe who normally has a page on...
That is if to do that is even possible. But if it is then that would be great, because my page has a container iframe showing a web page and if by clicking a button / link that iframe could show the source codes of the page too, that would be perfect.
I tried:
<a class="button" href="view-source:Func/Math_Calculator_Func.html" target="IFrWin">Show the Source Code for the math function</a>
<iframe src="Func/Math_Calculator_Func.html" name="IFrWin" id="IFrWin" width="100%" height="748px" scrolling="auto" style="overflow:auto; overflow-y:hidden; overflow-x:auto;" valign="middle" align="center" border="0" frameborder="no" noresize></iframe>
I also tried:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
function viewsource()
{
var oldHTML = document.getElementById('para').innerHTML;
var newHTML = "" + oldHTML + "";
var newHTML = newHTML.replace(/</g,"<");
var newHTML = newHTML.replace(/>/g,">");
var newHTML = newHTML.replace(/\t/g," ");
document.getElementById('IFrWin').innerHTML = newHTML;
var myIFrame = document.getElementById('IFrWin');
myIFrame.src=javascript:'"+newHTML+"'";
}
</script>
<input type="button" onclick="viewsource();" value=" View Source TEST "/>
<iframe src="Func/Math_Calculator_Func.html" name="IFrWin" id="IFrWin" width="100%" height="748px" scrolling="auto" style="overflow:auto; overflow-y:hidden; overflow-x:auto;" valign="middle" align="center" border="0" frameborder="no" noresize></iframe>
Both of them did not work.
If you are the owner of the source files, you can easily create a copy of the files, change their type to *.txt and simply change the source of your iframe to the given document.
This might work out with something along the way of this, you would just have to add the toggle mechanism.
document.getElementById('iframe').src = 'path/to/file.txt';
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" /> </script>
<script type="text/javascript">
function viewsource(){
$.get('Func/Math_Calculator_Func.html', function(data) {
var oldHTML = data;
var newHTML = "" + oldHTML + "";
var newHTML = newHTML.replace(/</g,"<");
var newHTML = newHTML.replace(/>/g,">");
var newHTML = newHTML.replace(/\t/g," ");
document.getElementById('iframe1').innerHTML = newHTML;
var myIFrame = document.getElementById('iframe1');
myIFrame.src="javascript:'"+newHTML+"'";
return1(); //call this function to show alert
});
}
</script>
</head>
<body>
<iframe src="" width="555" height="200" id="iframe1"></iframe>
<input type='button' onclick='viewsource()' value='View Source'/>
</body>
</html>
worked me..!! first check own then to integrate..set file path correctly..
any other doubt plz comment me...
This code takes input of a SoundCloud track URL and loads it in to the widget. Is there anyway of being able to extract and display the genre/tags of this song using the SoundCloud API?
<html>
<head>
<script type='text/javascript' src='https://w.soundcloud.com/player/api.js'></script>
</head>
<body>
<div id="sectionLoad">
<input type="text" id="url" value=""><br>
<div id="gap"></div>
<a id="loadButton" onclick="loadSong();" class="button">LOAD TRACK</a>
<div id="gap2"></div>
<iframe id = "sc-widget" width="80%" height="80%" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=single_active=false" ></iframe>
</div>
<script>
function loadSong(){
(function() {
var iframe = document.querySelector('#sc-widget');
var widget = SC.Widget(iframe);
var input = document.getElementById("url");
widget.load(input.value);
console.log(widget);
}());
}
</script>
</body>
</html>
the Soundcloud widget has a getter method, getCurrentSound(), that'll return that information for you!
Notice you'll want to call getCurrentSound() only when the widget is done loading a song, otherwise it'll return null. SC already provides a ready event, SC.Widget.Events.READY, that you can bind that to, so after widget.load(input.value); add this bit:
widget.bind(SC.Widget.Events.READY, function(){
widget.getCurrentSound(function(currentSound) {
console.log(currentSound);
var genre = currentSound.genre;
var tags = currentSound.tag_list;
// add genre and tags to appropriate elements
});
});
I made a jsfiddle here where I broke the getCurrentSound call out into a separate function called showSongInfo: https://jsfiddle.net/dfnny3rp/
I am trying to search for a word inside a pdf using a textbox inside the webpage.I embedded the pdf inside a IFRAME, but it is not working.This code is working with normal text.When i search for words, sometimes it opens the pdf or refreshes the page, instead of highlighting it.
<style>
span.highlight {
background: yellow
}
</style>
<input type="text" />
<div class="para">
<button onclick="getIframeText()">get iframe text</button>
<iframe id="myframe1" src="h.pdf" style="width:718px; height:700px;" frameborder="0"></iframe>
</div>
JAVASCRIPT FOR SEACRHING THE TEXT
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript'>
var $para = $('.para')
$("input").keyup(function() {
$para.find('span.highlight').contents().unwrap();
var mysearchword = this.value.trim();
if (mysearchword) {
var re = new RegExp('(' + mysearchword.trim().split(/\s+/).join('|') + ')', "gi");
$para.html(function(i, html) {
return html.replace(re, '<span class="highlight">$1</span>')
});
}
});
</script>
The code will not work for PDF.
Replacing the word found in HTML with highlight class, it's okay. But this is not possible for PDF. You need to convert PDF into HTML first.
Is it possible to add a textbox into an iframe, and append it into the src of the iframe. So i have created an modal box displaying a button for the user to click "ADD BUTTON"
<div id="addFeature" class="openAdd">
<div>
X
<h2>Add...</h2>
<button class="text" type="button">Text</button>
</div>
</div>
As the user clicks on the button, I need the modal box to close and a text box added. The following iframe is within main.html. As you can see the iframe displays the other html page.
<div>
<iframe class="newIframe" id="newIframe" src="webpage.html" onload="iFrameOn();">
Your browser does not support Iframes
</iframe>
</div>
Though I need the textbox to be added in webpage.html which is
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="index.js"></script>
</head>
<body onload="iFrameOn();">
<div id="design">
</div>
</body>
</html>
JS:
addTextBox() {
var text = "'<div><input type='textbox'/></div>'"
var textbox = document.createElement('div');
textbox.innerHTML = text;
var addText = document.getElementById('div').src = "webpage.html";
addText.appendChild(textbox);
}
Is it possible to do what I'm asking?
I'm afraid explaining this in the way you're trying to do this now, would be an endless swamp. Here's some guidelines, how you can achieve this quite easy.
Probably you need to remove the onload from iframe tag first. Then put these lines to your main page:
var textForIframe; // Take care that this variable is declared in the global scope
function addText () {
document.getElementById('newIframe').src = 'webpage.html';
textForIframe = '<div><input type="text" /></div>'; // or whatever text you need
return;
}
When ever your dialog is ready, call addText().
Then in webpage.html, remove the onload from body tag, and add the function below to somewhere after <script src="index.js"></script> tag.
window.onload = function () {
var addTextElement = document.getElementById('design'), // or whatever element you want to use in iframe
textToAdd = parent.textForIframe;
// depending on what iFrameOn() does, place it here...
addTextElement.innerHTML = textToAdd;
iFrameOn(); // ... or it can be placed here as well
return;
};
These snippets add a new input type="text" to #design within iframe.
I have the following code where I am trying to embed a youtube player into a html page.
I do not see any errors on the console, but the player is not added on the html page.
<form name="urlReaderForm" onSubmit=" return validateForm()" method="post">
Url: <input type="text" name="url"><br>
edit: Times: < input type="Number" name="times"<br>
<input type="submit" type="submit" value="Submit">
</form>
<div id="youPlayer"></div>
<script>
function validateForm() {
var url=document.forms["urlReaderForm"]["url"].value;
var loopCounter=document.forms["urlReaderForm"]["times"].value;
var len = url.length;
var vIDpos=url.indexOf("v=");
var vID=url.substring(vIDpos+2,len-1);
alert(''+vID);
var html_var='';
html_var ="<object style='height: 390px; width: 640px'> <param name='movie' value='https://www.youtube.com/v/'"+vID+"'?version=3&feature=player_embedded&loop='"+loopCounter+"'&playlist='"+vID+"'><param name='allowFullScreen' value='true'><param name='allowScriptAccess' value='always'><embed src='https://www.youtube.com/v/'"+vID+"'?version=3&feature=player_embedded&loop='"+loopCounter+"'&playlist='"+vID+"' type='application/x-shockwave-flash' allowfullscreen='true' allowScriptAccess='always' width='425' height='344'></object>";
document.getElementById("youPlayer").innerHTML = html_var;
}
</script>
there's a couple of issues in the sample above...
there is no field for
var loopCounter=document.forms["urlReaderForm"]["times"].value; to read on the form
when you extract the URL from the form you strip off the last character. Use var vID=url.substring(vIDpos+2,len);
unless you add return false;
to the end of the script it will reload the page because of the so you'll never see your errors
I would recommend using the more modern iframe embeddeding, but if you still need to stick with your solution then try the following:
function validateForm()
{
var url=document.forms["urlReaderForm"]["url"].value;
//var loopCounter=document.forms["urlReaderForm"]["times"].value;
loopCounter = 0;
var len = url.length;
var vIDpos=url.indexOf("v=");
var vID=url.substring(vIDpos+2,len);
alert(''+vID);
var html_var='';
html_var ="<object style='height: 390px; width: 640px'><param name='movie' value='https://www.youtube.com/v/"+vID+"?version=3&feature=player_embedded&loop='"+loopCounter+"'&playlist='"+vID+"'><param name='allowFullScreen' value='true'><param name='allowScriptAccess' value='always'><embed src='https://www.youtube.com/v/"+vID+"?version=3&feature=player_embedded&loop='"+loopCounter+"'&playlist='"+vID+"' type='application/x-shockwave-flash' allowfullscreen='true' allowScriptAccess='always' width='425' height='344'></object>";
console.log(html_var);
document.getElementById("youPlayer").innerHTML = html_var;
return false;
}
I have to agree with previous poster about the build-in embeded code. To give you two new ideas I did this myself on two occassion using one and the other on the 2nd site.
<iframe width="640" height="360" src="http://www.youtube.com/embed/9m-L5InQZvM?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>
Is for the embeded one, the 2nd option I used was that I just made a list with videos and a general iframe just to have a target like so
<body class="center">
<h2 class="media">Videos</h2>
<ul id="list" class="videolist">
<li class="videolist"></li>
<li class="videolist"></li>
</ul>
<iframe id="video-frame" src="" width ="600" height ="350" name="video-frame">
</iframe>
</body>
And then put the embeded code into separate .html files like so
<!DOCTYPE html>
<iframe width="576" height="324" src="http://www.youtube.com/embed/FjCehYrEbO0?feature=player_detailpage">
Your browser does not support frames, please update your browser
</iframe>
But the main point is still, use a iframe and it's still considered HTML5 valid even though frames can be frowned upon, but that is general use. You can still use frames but they should be used to serve a greater purpose and not just because it's "easier" to divide/update content on a page.