To say that I am a novice in javascript is an insult to a novice. Even my limited HTML knowledge is self-taught. Here's my problem: I am trying to massage the src in a simple iframe, like so:
<html>
<head>
<script type="text/javascript">
function embedKey() {
var url = window.location.href;
var symbol = url.split('?')[1];
if(symbol=="INNO"){
uniqueKey = "&resid=27A14C5DE396792C%21235&authkey=ANDfOBKrOKskLqg"
return "https://skydrive.live.com/embed?cid=27A14C5DE396792C" + uniqueKey +"&em=2&wdAllowInteractivity=False&ActiveCell='Sheet1'!B3&wdHideGridlines=True&wdHideHeaders=True"
}
else {
alert(url);
return false;
}
}
</script>
</head>
<body>
<iframe width="402" height="346" frameborder="0" scrolling="no" src=javascript:embedKey();></iframe>
</body>
</html>
I will be adding many more conditions/symbols/return strings to the embedKey() function. Right now, I am trying to make it work with one.
I don't think JavaScript gets executed from a src attribute like that. With something like an href attribute on an a element (where one often sees inline JavaScript) there's at least a click event to respond to, but not in this case.
Instead of trying to call the function inline from the element like that, call it from a script block after the element has loaded. Something like this:
<iframe width="402" height="346" frameborder="0" scrolling="no" id="someIframe"></iframe>
<script type="text/javascript">
document.getElementById('someIframe').src = embedKey();
</script>
Related
I need to find a specific element, which is inside an iframe, from a parent component, the structure would be something like this: (Just an example)
Edit: See comments below concerning the nature of this example
<iframe id ='if1'>
<iframe id ='if2'>
<iframe id ='if3'>
<iframe id ='if4'>
<input type='hidden' id ='elementToBeFound'>
</iframe>
</iframe>
</iframe>
</iframe>
Now, how can i do this with javascript? (Can also be jquery or another helper)
I have a reference to the first iframe ('if1'), i wanted to search all child nodes until i found 'elementToBeFound'.
Is this possible?
Thanks in advance.
My question is different from the existing ones, because i want to access multiple iframes inside iframes, not only one level.
I belive that something like this should work:
const elem = document.getElementById('if1').contentDocument
.getElementById('if2').contentDocument
.getElementById('if3').contentDocument
.getElementById('if4').contentDocument
.getElementById('elementToBeFound')
But for sure all windows should be loaded to do that. In real workld it may be more complicated you will need to listen for load event for each iframe to be able to check what is inside.
You can use this function to query for any element on the page, regardless of if it is nested inside of an iframe:
function querySelectorAllInIframes(selector) {
let elements = [];
const recurse = (contentWindow = window) => {
const iframes = contentWindow.document.body.querySelectorAll('iframe');
iframes.forEach(iframe => recurse(iframe.contentWindow));
elements = elements.concat(contentWindow.document.body.querySelectorAll(selector));
}
recurse();
return elements;
};
querySelectorAllInIframes('#elementToBeFound');
Note: Keep in mind that each of the iframes on the page will need to be of the same-origin, or this function will throw an error.
You can get the div element by using iframe.contentWindow call.
Here is the example:
NOTE : You have to use "src" (external iframes) to make it work
<!DOCTYPE html>
<html>
<head>
<title>IF1</title>
</head>
<body>
<iframe id='if1' src="./iframe2.html">
<!-- <iframe id='if2'>
<iframe id='if3'>
<iframe id='if4'> -->
<!-- <div id='elementToFind'>Hello</div> -->
<!-- </iframe>
</iframe>
</iframe> -->
</iframe>
<script>
window.onload = function() {
let if1 = document.getElementById('if1').contentWindow;
let if2 = if1.document.getElementById('if2').contentWindow;
let div = if2.document.getElementById('elementToFind');
console.log(div)
}
</script>
</body>
</html>
I have a page which contains another page embedded inside an object tag.
Now I want to call a javascript function from the "parent"-page. To be specific: The parent page wants to call a function, which resides inside the embedded code.
Former I used iframes but they caused some nasty bugs with Firefox, so I don't want to use them anymore.
Edit:
So, my question is: what would be the best way to achieve this, when using an object tag?
Here's some example to illustrate what I want to do:
I have a HTML page "parent.html" inside this page there is some Javascript inside a tag. This parent.html also has an tag and the src of this tag is another HTML page, let's call it child.html. The child.html page has something like:
Here's some pseudo code:
in Child.html:
<script type="text/javascript" src="child.js"></script>
in Child.js:
function getSomething(){
return something;
}
in Parent.html:
<object id="childObject" data="child.html" width="850" height="510">
</object>
<script>
// Here I want to access the function from the child.js
// I tried something like this, but it doesn't work:
var something = document.getElementById('childObject').contentDocument.getSomething();
</script>
Now:
In the Javascript inside the parent.html I need to call a function from the child.js.
How can I achieve this?
Thank you :)
Using contentWindow instead of contentDocument works for me:
<object id="childObject" data="child.html" width="850" height="510">
</object>
<script>
var something = document.getElementById('childObject').contentWindow.getSomething();
</script>
You Can try This
<object id="childObject" data="child.html" width="850" height="510">
<script>
var something = document.getElementById("childObject").parentElement.getSomething();
</script>
I am currently using Ace (http://ace.c9.io/) to take code from an editor and execute it within an iFrame. My issue is that when I add something along the lines of
Code in Editor
<script type="text/javascript">
window.onload = function() {
alert("hello");
}
</script>
to the head or body of the iFrame, the code is never executed. This is my current code:
Injecting Code into iFrame
$("#btnRun").click(function(event) {
event.preventDefault();
// iFrame with id="preview"
var preview = $("#preview").contents();
// Get code from editor and wrap in <script> tags
var script = "<script type='text/javascript'>" + ace.edit("js-editor").getSession().getValue() + "</script>";
// Append code to head or body, in this case head
preview.find("head").append(script);
});
The code is successfully added to the iFrame, however it is never executed. I can also successfully add HTML/CSS and it displays in the iFrame, but the javascript is never touched.
I have tried wrapping the code in script tags within the editor only, as well as using an escape character on the closing tag: "</script>" but to no avail.
This is the iFrame in my index.html document.
iFrame in index.html
<iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0">
#document
<!-- Editor content goes here -->
</iframe>
After the code is injected the iFrame looks like this
iFrame with Injected Code
<iframe class="editor" id="preview" name="result" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" frameborder="0">
#document
<html>
<head>
<script type="text/javascript">
window.onload = function() {
alert("hello");
}
</script>
</head>
<body>
</body>
</html>
</iframe>
Also when calling the window.onload or window.top.onload event from within the iFrame, the code executes but only affects the page containing the iFrame and not the contents of the iFrame itself.
Thank you.
Note: When the code is not within window.onload it runs fine. However I wish to be able to execute this code when the frame's onload function is executed.
I would think that you are adding the JS to the iframe after the onload event has already fired.
Perhaps you could try simulating an event to run the preview code or dispatching the onload event again?
Might help: https://developer.mozilla.org/en-US/docs/Web/API/Window.dispatchEvent
I was able to fix this myself. The problem was that appending the script to be within the iFrame wasn't enough to make it work. To make the script only be executed within the iFrames DOM was to write directly to it.
$("#btnRun").click(function(event) {
event.preventDefault();
var previewDoc = window.frames[0].document;
var css = ace.edit("css-editor").getSession().getValue();
var script = ace.edit("js-editor").getSession().getValue();
var html = ace.edit("html-editor").getSession().getValue();
previewDoc.write("<!DOCTYPE html>");
previewDoc.write("<html>");
previewDoc.write("<head>");
previewDoc.write("<style type='text/css'>" + css + "</style>");
previewDoc.write("<script type='text/javascript'>window.onload = function() {" + script + "}</script>");
previewDoc.write("</head>");
previewDoc.write("<body>");
previewDoc.write(html);
previewDoc.write("</body>");
previewDoc.write("</html>");
previewDoc.close();
});
I think it would be more elegant to use the contentDocument property of the iframe, and then inject the script and trigger the parser so it actually interprets it as JavaScript.
I put up a small proof of concept on github. I hope it solves your problem in a more elegant manner.
https://github.com/opreaadrian/iframe-injected-scripts
Cheers,
Adrian.
I'm trying to create an external link, that appears within the same site.
Here, If I click on a link it should display the contents of that link(external site) within our site. i.e., if my site is siteA and in that I place a link (to siteB) that will redirect to 'siteB' closing 'siteA'. I just want to avoid the situation besides I want to make the siteB to be opened within the siteA
My idea is when the link is opened, an iframe will be created and the external site will be opened within that Iframe.
Google
<script type="text/javascript">
function executeOnClick(){
<iframe name="your_frame_name" src="www.google.com" > </iframe>
return true;
}
</script>
I wrote this code, but couldn't get what I expect. I tried to use button, but it's not working.
Is there any other way to fix my issue..
No javascript is needed, use target attribute:
Load the page
<iframe id="iframe1"> </iframe>
JSFiddle
IMPORTANT: you cannot display http://google.com in iframes because of their X-Frame-Options. See: The X-Frame-Options response header
function executeOnClick(){
$('body').append('<iframe name="your_frame_name" src="www.google.com" height=200 width=200 > </iframe>');
return true;
}
try this
The iframe markup should not be inside your JavaScript function. That does nothing except throwing an exception. Put the markup below your anchor and change its src on click:
Google
<iframe id="targetFrame"></iframe>
<script>
function executeOnClick(target) {
document.getElementById("targetFrame").src = target.src;
return false;
}
</script>
In fact you don't even need JavaScript to do this. You can use the target attribute of the anchor and set it to be the name of the frame you want to open the page in:
Google
<iframe name="targetFrame" id="targetFrame"></iframe>
Change to this:
onclick="executeOnClick(this); return false;"
and do this in your funcition:
<script type="text/javascript">
function executeOnClick(elem){
var frame = '<iframe name="your_frame_name" src="'+ elem.getAttribute('href') +'" > </iframe>';
document.body.appendChild(frame); // <----append it here.
}
</script>
In your onclick function you have to return false; to stop the default behaviour of an anchor to take you to the another page.
please note that the google.com will not work with iframe
Google
<iframe id="targetFrame"></iframe>
<script>
function executeOnClick(src) {
document.getElementById("targetFrame").src =src;
}
</script>
<iframe src="www.google.com" height="400" width="551" frameborder="0" scrolling="no" runat="server"></iframe>
Use runat attribute too. Hope this works.
If doesn't, what's the error?
I though this would be simple enough but I can't find the answer. I need to know how I can access an iframe's name from within said iframe. I was trying something like this but it's not working.
<iframe name="thename">
<script type="text/javascript">
alert(parent.name);
</script>
</iframe>
There is a combination of answers I prefer:
// window.frameElement Gets IFrame element which document inside
window.frameElement.getAttribute("Name");
It works on IE7+, Mozilla & Chrome
You were nearly right. Setting the name attribute on a frame or iframe sets the name property of the frame's global window object to that string. (Not parent, which refers to the window of the document that owns the frame.)
So unless some other script has deliberately changed the name, it's as simple as:
1.html:
<iframe name="tim" href="2.html"></iframe>
2.html:
<script type="text/javascript">
alert(window.name); // tim
</script>
in some cases window.frameElement returns null in iframe, so i figured workaround for it.
1. you need to set hash in src url of iframe
<iframe name="tim" href="2.html#your-hash"></iframe>
2. in iframe you can get this hash with
<script type="text/javascript">
var hash = window.location.hash;
</script>
Well, an IFRAME element shouldn't contain anything, it's targeting another document. So using a SCRIPT tag inside an IFRAME doesn't make alot of sense. Instead, use the SCRIPT inside the called document, e.g.
iframe_caller.html:
<html>
<body>
<iframe id="theIframe" name="theIframe" src="iframe_doc.html"></iframe>
</body>
</html>
iframe_doc.html:
<html>
<body>
<script type="text/javascript">
var iframes= parent.document.getElementsByTagName("iframe");
document.write(iframes[0].getAttribute("id"));
</script>
</body>
</html>
Note I'm using parent.document.function() there.
Something like this should work:
parent.document.getElementById('idhere').name;
You have to use the parent and then get the element either byId, Name, etc... then access the name property.
So your code should be like:
<iframe name="thename">
<script type="text/javascript">
var iframeName = parent.document.getElementById('idhere').name;
</script>
</iframe>