I am using the following JavaScript (in the script tag in head) to modify an iframe's src when a link is clicked.
function switchView() {
document.getElementById("project-view").src = 'projects/3dpool.html';
}
My iframe is written as
<iframe id="project-view" src="projects/fallingballs.html" onload="resizeIframe(this);" scrolling="no"></iframe>
The link that changes the iframe is:
3D Pool
Adding a log statement like document.getElementById("project-view").src after the src change shows that the src has actually changed but no changes show up.
I have tried removing the unload tag from the iframe but it doesn't help.
Typing out the code in the switchView() function in the web console works
Change your link to look like the following:
3D Pool
Related
I have created an embed object in HTML and this code in Javascript:
function mainLoop() {
var browser = document.getElementById("browser");
console.log(browser.src);
}
//call main loop
setInterval(mainLoop, 1000);
<embed src="https://en.wikipedia.org/wiki/Main_Page" id=browser>
When I run the webpage, the console constantly prints "https://en.wikipedia.org/wiki/Main_Page", which is what is expected. However, when I click on a link inside the embed HTML to change the webpage inside the embed HTML, the console continues to print "https://en.wikipedia.org/wiki/Main_Page".
How do I access the current URL of the content inside of the embed HTML?
(I cannot use browser.contentWindow because of a Security Error)
Unfortunately due to CORS, this is impossible. Perhaps find a different way of doing this, or make a page similar to the one shown.
You cannot access the src of an iframe that is from another domain.
Here is the thing - I'm trying to create kind of email signature generator. Most of the index file, is a pure HTML code + tiny javascript. Inside index file I'm embeding email signature template as an iframe/email_signature.html file. So it looks as follows:
<iframe src="email_signature.html" width="100%" height="350" frameborder="0" id="testing" name="emailSignature"></iframe>
Then I'm trying to download current content of this iframe by executing this code:
$(document).ready(function() {
const innerFrame = document.getElementById('testing').contentWindow.document.body.innerHTML;
$("#cmd").click(function(){
exportFile('new-file.html', $innerFrame.innerHTML);
});
});
but it doesn't work. Here is the example fiddle:
https://jsfiddle.net/py1tojmc/
What I'm doing wrong here?
From what I can see in the dev console opening your jsfiddle, i don't see any "event" attached to your download button.
I can't tell you why this is happening (I'm not that expert), but maybe the call to .contentWindow.document.body.innerHTML; is somehow changing the DOM context to the iframe (just a guess), and it seems you cannot access the button id #cmd anymore.
Try changing your code like this ans see if it works:
$(document).ready(function() {
$("#cmd").click(function(){
const innerFrame = document.getElementById('testing').contentWindow.document.body.innerHTML;
exportFile('new-file.html', $innerFrame.innerHTML);
});
});
Yeah looks like the button event won't fire. But could be cross origin security:
SecurityError: Permission denied to access property "document" on cross-origin object
But that could just be the jsfiddle, can you put an alert('cmd button works'); just to make sure your button fires?
I need the following:
I got a html document, in which I have an iframe and an object. Both, the iframe and the object contain separat html files.
Now I want to click a link in the iframe, and this should affect the links inside the object to hide.
How do I use jQuery selectors to select the links in the object html file?
Structure:
<html file parent>
<iframe> html site 1 with link to click</iframe>
<object> html site 2 with links to affect </object>
<html file parent>
Thanks in advance!
This is not possible if the domain of the iframe is different from that of your .
This is a javascript restriction.
For this to possible you need to have control on the url loaded in the iframe.
If it is of same domain then you can probably do that.
If you have control over the iframe's url try this.
First, have a look at window.postMessage. Using this, you may send an event from your iframe to the window parent target. Listening for that event in the window parent (when something in your iframe changed), you will then be able to access any element inside the object tag using a syntax like this:
$('object').contents().find('linkSelector')
Give your iframe an id, let's say myIframe:
<iframe id="myIframe"> html site 1 with link to click</iframe>
Get a reference to the iframe:
var myIframe = document.getElementById('myIframe');
Post a message from iframe:
myIframe.contentWindow.postMessage('iframe.clicked', 'http://your-domain.here.com');
Handler for iframe change:
var handleIframeChange = function(e) {
//
if(e.origin == 'http://your-domain.here.com') {
// Get reference to your `object` tag
var objContent = $('object').contents();
// For instance, let's hide an element with a class of `link-class-here`
objContent.find('.link-class-here').hide();
}
}
Listen on parent window for the event sent by the iframe:
window.addEventListener('iframe.clicked', handleIframeChange, false);
Haven't tested it right now (did this in the past, when I had control over iframe) but it should work, but as I said, only if you can have control over the iframe.
I am using ImageFlow 9. I have an ImageFlow scroller script added in the Iframe. I want to have the images opened outside the iframe that is on the Parent page. Right now it is opening the images in the Iframe itself. What changes should I do and in which file?
There is a .js file that has a function as below -
image.onclick = function() { document.location = this.url; }
Do I need to make the changes here or in the actual script that uses this code-
<img src="reflect.php?img=img/large1.jpg" longdesc="javascript:myLightbox.start('img/large1.jpg|Image 1');" alt="Image 1" />
Create a JavaScript function on the parent page, and call that from the iFrame.
Something like
function openImage(url){
// do your image handling stuff here
}
From the iFrame call the function:
parent.openImage(url);
ps: I recommend not using iFrames at all unless there is no other way (which most of the time is not the case)
i'm working in an application
i have to change some css files in the page and some images (reloading them from the server) using javascript , but it takes some time and it's obvious that page items are reloaded slowly -in slow connections- , so is it possible to do this processing in the background and then display the whole page when ready ??
AFAIU you can put it in a hidden IFRAME. In this IFRAME you handle onLoad event. However, this won't fasten up loading process, it will only hide it from user.
Examle:
Let's say that you have a long-lasting JavaScript method named longLoad() . You should put it in a separate HTML page named e.g. hidden.html.
<html>
<script type="text/javascript">
function longLoad() // javascript method here...
{
/// some code here...
}
</script>
<body onLoad="longLoad();">
</body>
</html>
Your main page (the one that is actually visible in browser) may look like this:
<html>
<body>
....
.... content
....
<iframe src ="hidden.html" width="100%" height="0">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
As you can see IFRAME height is set to 0 making it invisible on the page- that's why I called it hidden. However, when the user loads the page, the hidden IFRAME will be loaded too. And its onLoad event handler will also be called. And it is possible to access and modify content of the main page from that JavaScript event handler (through DOM trees).
PS. The above code was written from memory, however the presented solution works. It was used long before AJAX came into popularity.
You can hide the whole page while your work is going on, or you could load your CSS and images and only do the updates to the DOM when all your materials have made it to the client.
You can load an image by creating a new Image object:
var img = new Image();
img.onload = function() { /* do something */ };
img.src = "/new/image.png";
The "onload" function will run when the client has received the image file and it's ready to be displayed. Thus you could arrange to load up images that way, and use the "load" handlers to track when they're ready. When all of them are, then you can update the DOM and it should go very quickly.