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...
Related
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.
How do I force any iframe content to appear on top if the content is changed as if the link had the target="_top" attribute...
EXAMPLE 1: Normally this code is what would be applied in a page.
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
if(top!=self){
top.location.replace(document.location);
alert("For security reasons, framing is not allowed; click OK to remove the frames.")
}
</script>
But I need to aply it to the iframe instead, and fire it only if the iframe is changed. How do I do that?
For example, I click on a link within the iframe, once that page changes URL then the iframe puts the page on target="_top" without having attributes for it in the iframe URL page, but the attributes for it should be from the iframe page itself.
EXAMPLE 2:
I have found a code that works as it should, the problem is only that it only fires when clicked on a button. Can I somehow make it to fire automatically when content of the iframe changes?
JavaScript:
<script type="text/javascript">
//<![CDATA[
$(window).load(function(){
document.getElementById('example-button').addEventListener('click', function (ev) {
ev.preventDefault();
var win = open('about:blank');
var iframe = document.getElementById('example-iframe');
setTimeout(function () {
var body = win.document.body;
body.style.padding = 0;
body.style.margin = 0;
body.appendChild(iframe);
iframe.style.position = 'fixed';
iframe.style.padding = 0;
iframe.style.margin = 0;
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 0;
}, 100);
win.addEventListener('beforeunload', function () {
document.getElementById('example-container').appendChild(iframe);
iframe.style.position = '';
iframe.style.padding = '';
iframe.style.margin = '';
iframe.style.width = '';
iframe.style.height = '';
iframe.style.border = '';
});
});
});
//]]>
</script>
HTML:
<button id="example-button">open in new window</button>
<div id="example-container">
<iframe id="example-iframe" src="https://example.com/">
</iframe>
</div>
After fiddling and putting together with loads of ideas given online by others I came up with a solution that is 70% correct.
Now the only thing that remains is how to make it react ONLY when the iframe URL changes and not when loading like now.
JavaScript:
<script language="JavaScript">
function GoToURL()
{
var URLis;
URLis = document.URLframe.u.value
{
var location= (URLis);
window.open(location, '_blank');
}
}
</script>
HTML:
<form name="URLframe" id="URLframe" method="post">
<iframe id="test" src="https://example.com" onload="GoToURL(this);"></iframe>
<input type="hidden" name="u" size="71" value="" placeholder=" URL " id="SeekBox" onkeypress="handleKeyPress(event)">
<script type="text/javascript">
(function() {
document.getElementById('SeekBox').value = document.getElementById('test').src;
})();
</script>
</form>
To test it easier I used these codes at the bottom instead:
<iframe id="test" src="https://www.4shared.com/privacy.jsp" onload="loadurl();" width="100%" height="528px"></iframe>
<input type="text" name="u" size="71" value="" placeholder=" URL " id="SeekBox">
<input type="button" id="SeekButton" onclick="GoToURL(this);" value=" go ">
<input type="button" id="SeekButton" onclick="loadurl();" value=" load url ">
<input type="button" id="SeekButton" onclick="alerturl();" value=" alert url ">
<script type="text/javascript">
function alerturl() {
alert($('iframe').attr('src'));
}
</script>
<script type="text/javascript">
function loadurl() {
document.getElementById('SeekBox').value = document.getElementById('test').src;
}
</script>
If I understand you correctly then you want to get the src of the iframe any time there is a change within the iframe and then open a window with that src. If I'm right then it doesn't seem like it's possible. I tried to get the source of the iframe using this little bit of code but to no avail.
<iframe id="test" src="justanotherwebsite.com" onLoad="iframeLoad()"></iframe>
<script>
var counter = 0;
function iframeLoad(){
if (counter > 0){
console.log($('#test').attr('src'));
}
counter ++;
}
</script>
Let me know if I'm way off the mark on this and I'll have another look.
I'm new to JS and I need some help. I want to make a random quote page. I have all of the quotes saved as .txt files (1.txt, 2.txt...87.txt). I like the way embed makes the quote look, just kind of plain and type writer-ish.
The end result I am looking for is changing the src in the embed tag to a random quote whenever the Random button is clicked.
Here is what I have:
<html>
<head></head>
<body>
<button onclick="myFunction()">Random</button>
<embed id="text" src="a.txt" width="500" height="300">
<p id="rand"></p>
<script>
function myFunction() {
var x = Math.floor((Math.random() * 87) + 1);
document.getElementById("text").src = x + ".txt";
document.getElementById("rand").innerHTML = x + ".txt";
}
</script>
</body>
</html>
The extra document.getElementById("rand").innerHTML was just so I could see if the randomization part was working, which it is.
I'm not sure about the document.getElementById("test").src = x + ".txt"; part.
I though it was to change the src in whatever tag the id was in but it doesn't seem to be working that way.
I go it. I ended up using an iframe to load them and it works perfectly
<body onload="randomQuote()">
<center>
<button onclick="randomQuote()">Random Quote</button>
<p>
<iframe id="text" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="a.txt" width="300" height="300"></iframe>
<p id="rand"></p>
<script>
function randomQuote() {
var x = Math.floor((Math.random() * 87) + 1);
document.getElementById("text").src=x+".txt";
}
</script>
<html>
<head>
<script type="text/javascript">
function PrintElem()
{
var mydiv1 = document.getElementById("div1");
var mydiv2= mydiv.getElementsByTagName("div2");
printTheDivs(mydiv1, mydiv2);
}
function printTheDivs (d1,d2)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><body>' + d1.innerHTML + '</body></html>');
//Here I want to show the Images in this window.
$(d2).print();
//but want to print the Div2 Images I’m using the jquery.print.js plugin but not working. It is printing complete page. How to accomplish the task with multiple Browsers.
}
</script>
</head>
<body>
<div id="div1">
<img src=”image1.jpg”/>
<img src=”image2.jpg”/>
<img src=”image3.jpg”/>
<img src=”image4.jpg”/>
<img src=”image5.jpg”/>
</div>
<div id="div2">
<img src=”image6.jpg”/>
<img src=”image7.jpg”/>
<img src=”image8.jpg”/>
<img src=”image9.jpg”/>
<img src=”image10.jpg”/>
</div>
<input type="button" value="Print Div" onclick="PrintElem()" />
</body>
</html>
I want to show one div using window.open() and print another div. I’m using the jquery.print.js plugin but not working. It is printing complete page. How to accomplish the task with multiple Browsers. Please help me. Thanks in advance.
You can print particular div
<div id="divid">test</div>
function printDiv(divID) {
//Get the HTML of div
var divElements = document.getElementById(divID).innerHTML;
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head><title></title></head><body>" +
divElements + "</body>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
}
printDiv('divid')
check here http://jsfiddle.net/jrhp8/
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.