I have an html page. Here, I am using tabview of Yahoo API. That is :
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><em>Top Stories</em></li>
<li><em>Finance</em></li>
<li><em>Sports</em></li>
</ul>
<div class="yui-content">
<div><p>Top Stories</p></div>
<div><p>Finance</p></div>
<div><p>Sports</p></div>
</div>
</div>
In the onClickEvent the functions used, fetch data from Google NEWS>
function TopStories(){
location.href="http://www.google.com/news/search?aq=f&pz=1&cf=all&ned=in&hl=en&q=TopStories";
}
function FinanceNews(){
location.href="http://www.google.com/news/search?aq=f&pz=1&cf=all&ned=in&hl=en&q=Finance";
}
function SportsNews(){
location.href="http://www.google.com/news/search?aq=f&pz=1&cf=all&ned=in&hl=en&q=Sports";
}
But the Output is navigation to NEWS page. But, I want to display them as Tab Content.
What should I do ?
You can use iframe for this purpose .. see below example ,,
Using Jquery tab, its always create a div where your result display. You have only way to open external link on your page using .
<li><a href=ReturnIfram()><span>Google</span></a></li>
href get a string which contain ifram like
public string ReturnIfram()
{
return "<iframe src="http://google.fr"></iframe>"
}
try above in javascript see below example
<html>
<head>
<script language="JavaScript" type="text/javascript">
function makeFrame() {
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", "http://developerfusion.com/");
ifrm.style.width = 640+"px";
ifrm.style.height = 480+"px";
document.body.appendChild(ifrm);
}
</script>
</head>
<body>
<p>GO! </p>
</body>
</html>
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.
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.
I made a little web-based web browser for a web-based OS I made. I noticed that in some sites, they have links that like to open in new tabs. Is there a way that this can be prevented and have the links open in the iframe instead?
Here's my code for the whole browser just in case:
<html>
<head>
<link href="./browser.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function() {
$("#load").click(function() {
var new_url = $("#url").val();
// Checks that the user typed "http://" or not
if(new_url.substr(0,7)!="http://")
new_url = "http://"+new_url;
$("#main_frame").attr("src", new_url);
});
});
</script>
</head>
<body>
<div id="help">
<form action="help.html"><input type="submit" value="Help"></form>
</div>
Address:
<div id="logo">
<img src="stallion.png">
</div>
<input type="text" style="width: 400px;" name="url" id="url">
<input type="button" value="Go" id="load">
<div>
<input type="image" src="back.png" height=25 width=25 onclick="back()">
<input type="image" src="forward.png" height=25 width=25 onclick="forward()">
<input type="image" src="refresh.png" height=26 width=26 onclick="refresh()">
</div>
<iframe frameborder=0 class="netframe" src="http://www.bing.com/" id="main_frame"></iframe>
</body>
<script>
function back()
{
window.history.back();
}
</script>
<script>
function forward()
{
window.history.forward();
}
</script>
<script>
function refresh()
{
var iframe = document.getElementById('main_frame');
iframe.src = iframe.src;
}
</script>
</html>
There is two choices
1 : You can check all of the html in the iframe on each change and look for "target=_blank" and if so replace with "target=_self"
2 : Which I think would be the better way is, when the user clicks on an anchor tag check to see if the anchor has the attribute "target=_blank" if they do, simply remove it and then click the link.
I have provided a jsFiddle below
https://jsfiddle.net/L5dhp80e/
Html
<a class="newTab" href="http://www.google.com" target="_blank">
New Tab Google
</a>
<br />
<a class="removeBlank" href="http://www.google.com" target="_blank">
Removed Target Blank Google
</a>
Javascript
$(function () {
$('a.removeBlank').on('click', function () {
if ($(this).attr('target') == "_blank") {
$(this).attr('target', '_self');
}
$(this).click();
return false;
})
});
However if the iframe content is cross domain I don't think you can edit any of the code at all.
Get DOM content of cross-domain iframe
I found this answer in the web:
window.open = function (url, name, features, replace) {
document.getElementById('#iframe').src = url;
}
or with jQuery:
window.open = function (url, name, features, replace) {
$('#iframe').attr('src', url);
}
I haven't already tested it, but i hope it works.
Add target="_self"
<iframe src="http://google.com" target="_self"></iframe>
Target Attributes are:
_self = Opens the linked document in the same frame as it was clicked (this is default)
_blank = Opens the linked document in a new window or tab
_parent = Opens the linked document in the parent frame
_top = Opens the linked document in the full body of the window
framename = Opens the linked document in a named frame
Information from:
http://www.w3schools.com/tags/att_a_target.asp
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.