I can't seem to find anything that works, but I need some html that makes an iframe based on what url entered into a text box. I use iframes to unblock websites on my school chromebook but its a hassle if I want to just check a website and see how it works on an iframe by making a whole new website. I just wanted something to easily preview a URL in an iframe.
In order to change the iframe source, you'd need a listener for when the input changes and when it does, change the source of the iframe by updating the src property. Setting up the listener, you could do something like this:
// Grab the element by ID
document.getElementById("example_input")
// Add the event listener to "input"
.addEventListener("input", exampleFunc);
function exampleFunc(event){
// Grab iframe by ID
let iframe = document.getElementById("example");
// Update the source
// First grab the input that was typed into
let input = event.target;
// Next get the value of that input
let newUrl = input.value;
// Now update the "src" property of the iframe
iframe.src = newUrl;
}
<html>
<head></head>
<body>
<input type="url" value="https://example.com" id="example_input">
<iframe id="example" src="https://example.com" width="1000" height="450" frameborder="0" scrolling="no"></iframe>
</body>
</html>
Although in this case, you may not want to update it every input but rather when a user stops typing, which has a solution in this question.
Please also note that many websites will not allow for iframes to make connections for various reasons (X-Frame-Options header, Content Security Policies, etc.), with examples of sites that won't work being Google and YouTube.
Related
The issue
I have the following iframe in my webpage.
<iframe id="videobox" width="270" height="410" src="/videochat" marginwidth="0" margin="0" scrolling="no" ></iframe>
I would like to show the src value of this iframe in another HTML element.
<div id="iframeurl">iframe url https://abcded.com/videochat/#abcd12345</div>
The end of the URL, which is the hash, is dynamically generated when visiting the iframe URL. This means that taking the initial src value will not include the dynamically generated URL.
Problem
The problem is that taking the src value from the iframe only shows https://abcded.com/videochat/. I need the URL with the dynamicly generated hash at the end, like https://abcded.com/videochat/#abcd12345
What I need
I need the full iframe url inside an <a> element like
Click to open the embed in a new tab.
or
I need to show the iframe URL inside of a seperate <div> element. For example, <div id="iframeurl">The URL is: https://abcded.com/videochat/#abcd12345</div>
You can get the current iframe URL through .contentWindow.location.href. Here is an example.
document.getElementById("videobox").contentWindow.location.href;
To display this in a separate element, set it's .innerhtml value to the URL plus any other relevant text.
document.getElementById("iframeurl").innerHTML = "The URL is: " + document.getElementById("iframe_id").contentWindow.location.href;
To make an <a> tag with the URL, use this code.
document.getElelemtById("iframelink").href = document.getElementById("iframe_id").contentWindow.location.href;
Don't forget to update the JavaScript code once the iframe is loaded after a certain period of time, otherwise it may not pull the correct value and pull the link before it redirects.
I want to go between pages inside a PDF File contained in a IFRAME by just clicking on a link.
This is what i made so far:
HTML:
Pagina 10
<iframe name="ifrx" id="ifrx" src="1430263377Physic.pdf" style="height:800px; width:1170px">
Script:
<script>
function pagina(pag) {
$("#ifrx").attr('src','').delay(100).attr('src','1430263377Physic.pdf#page='+pag);
return false;
}
</script>
But doesn't work, im trying to achieve this but with no luck.
Change attr to prop. Like that:
function pagina(pag) {
$("#ifrx").prop('src','1430263377Physic.pdf#page='+pag);
return false;
}
Attribute is used to set initial value of iframe object property when parsing, but when you're changing the attribute, value doesn't populate to property.
By the way, as far as I know, there is no need to clear src, wait and set it to right value.
UPDATE:
I checked this approach for websites (see here). I guess it's impossible for PDFs, so replacing iframe with new one, with updated src can be only possible way to do it.
My iframe has a variable. I want to access document holding the iframe and play with a variable defined in javascript.
e.g.
<html>
<head>
<script>var a=0;</script>
</head>
<body>
<iframe id=playmate src="document2.htm" height="150px" width="100%" scrolling="no"
border="0" frameborder="0"></iframe>>
</body>
</html>
Now in document2.htm I have a script that needs to access and manipulate var a. Can I access it directly, use jquery or plain vanilla javascript?
Its not a cross domain iframe. Promise. Same domain. Want them to play together nicely.
In the past I used to do this by getting the variable to insert a hidden input from one document into the other, but with the advent of ajax and what what I was wondering if I could just manipulate it.
So previously would write a function into the head of document, where if my var a did something, my hidden input in playmate document2 would update. Then document2 could just use hidden input and everyone was happy. When document2 played with the variable it would insert the result into hidden input in the holding document, and var a could then play properly with the new result.
I want to know if its now possible for playmate document2 to play with var a in the script without having to do hidden input. Would be very exciting.
Anyone got any ideas how to go about?
I am using jquery if that would make it easier.
I tried using this script in document2:
var c=window.document.parent.a;
But when I then output var c it tells me its notanumber. Bother. Please help. Or must I do my hidden input method.
You were close. It's actually:
window.parent.a
(window.parent returns a window object, and variables are children of the window object not the document object.)
What I would like to do is change the content of a div based on the different links clicked on the same page. Can anyone point me in the correct direction? AFAIK it could be dangerous to insert scripts directly into a page, changing text works okay but it seems I'm not sure about scripts. The content of the scripts are embed codes for video streaming. I realise this may not be the right way to go about it. My attempt won't work because of escaping the '<,>' characters and passing the parameter only seems to accept text with no spaces.
The way I've attempted it is as follows (in pseudocode);
function changeVideo(script){ div.innerhtml=script;}
then links that change the content of the div;
<a href='#' onclick=changeVideo('<iframe src=justin.tv etc..></iframe>')>
<a href='#' onclick=changeVideo('<iframe src=ustream.tv etc..></iframe>')>
You could drop the use of JavaScript and create an iFrame with a specified name to host the content; while giving the links a target tag. Thus making any links with the target tag specified appear within the named iFrame.
However if you insist upon using JavaScript you could consider the use of AJAX.
I suggest you to locate your a elements with unobstrusive Javascript, with getElementById() for example.
Once you have got them in variables like, lets say, a1 and a2, and the iFrame is in variable iframe do a code like this.
// ...a1 and a2 are anchors and iframe is the frame.
var srcSwitch = function(e)
{
e.preventDefault(); // this will prevent the anchor from redirecting you
iframe.src = this.src; // this changes the iFrame‘s source
};
a1.addEventListener('click', srcSwitch, 1);
a2.addEventListener('click', srcSwitch, 1); // and we register event listeners.
With this code, there is no need to insert Javascript within HTML attributes and you must only put the script URL in the anchors SRC attributes.
Tell me how it goes, greetings.
I may have generalised the question too much.
So I want to embed a stream on clicking a link. If the link is something like a proper URL
http://Jimey.tv/mystream
the iframe works, but loads the whole page. But I want to use the stream embed code to get just the player
The embed code looks similar to;
<script type = text/javascript> channel='mychannel' w='620' h='400'</script><script type=text/javascript> src="jimmy.tv/embed.js></script>
My original JavaScript method doesn't work because of escaping the < characters, and passing the embedcode seems to be problamatic. Hopefully I've made this a bit clearer?
<script>
iframe1 = '<iframe frameborder="0" scrolling="no" id="chat_embed" src="http://twitch.tv/chat/embed?channel=xenema&popout_chat=true" height="301" width="221"></iframe>'
</script>
link 1
link 2
<div id="videos">diiiiv</div>
I have two iFrames in my page and I would like to the value of an input field form one iFrame to an input field of the other iFrame. How can I do this?
You will need to set a hidden field or something in the parent:
window.opener.document.getElementById(Client ID of Hidden Field).value = Selected IDs;
You will then need to set the src attribute of the second iFrame and append the value as part of the querystring
something like:
<iframe id='iFrame2' src='/myPage.html?val=myValue' ></iFrame>
You can probably do this in javascript, when I did I did it with asp.net as the scenario was different but probably something like:
$('#iFrame2').attr('src', '/myPage.html?val=' + $('#myHiddenField').val());
Not the easiest. Can we assume that both the IFRAMES, and the parent document are all part of the same domain, and all the same doctype? If not, security restrictions are likely to block you.
Also, what browser(s) do yo uneed it to work in?
OK, given your answer above about being in the same domain, etc.
The answer about setting the URL of the IFRAME will work if you want to send/receive from the other IFRAME. However, I read it as you want to set a value in an existing field.
If that is the case, you need to do something like:
1. Assume IFRAMEs have the ids I1 and I2
2. Put this code on the parent page (you can trigger / place it in a child, but it gets more complicated as you need to handle load/ready state and do additional lookups.
var if1 = document.getElementbyId('I1');
var if2 = document.getElementbyId('I2');
//Or use $get from AJAX framework, etc
var doc1 = if1.document;
var doc2 = if2.document;
//These may throw security or load exceptions if the IFRAMES are not loaded, cross domain, or do not contain HTML.
doc2.getElementById('targetElement').value = doc1.getElementById('sourceElement').value;
//You should do the usual checking for the element existing, etc