calling javascript from js file - javascript

I have elements on my parent page that changes only if hidden iframe within contain one div id.
Everything is fine if I let code on html page :
<iframe id="myiframe" style="display:none" onload="load()" name="myiframe" src="mysite.com"></iframe>
JavaScript:
function load(){
if (window.frames[0].document.getElementById('applications'))
{
var str=document.getElementById("tst").innerHTML;
var n=str.replace("Login","Logout");}}
document.getElementById('tst').href='logout';
But I need iframe code deleted from html file and relocated js file.
I use this code in js file to trigger iframe:
window.onload = function(){
var link = "iframelink"
var iframe = document.createElement('iframe');
iframe.frameBorder=0;
iframe.width="300px";
iframe.height="250px";
iframe.id="randomid";
iframe.addEventListener("load", load);
iframe.setAttribute("src", link);
document.getElementById("ad54").appendChild(iframe);
}
html code to get iframe:
<div id="ad54"</div>
Iframe launches, but right now I get no elements changed on parent page although iframe is triggered . When iframe is loaded I need those changes to take place in parent page.

<div> elements do not load external content, so they never fire load events.
You appear to be trying to fire the event when the iframe content loads. You need to attach your event listener to the iframe.
iframe.addEventListener("load", load);
iframe.setAttribute("src", link);

Related

Add custom HTML in iFrame that already has a page loaded in it

I have a button and an iframe. When button is clicked, it opens a page in the iframe. I have another button, when it is clicked, it is supposed to add custom html to the already loaded page in the iframe, but it is not working.
HTML:
Load page in Iframe
Update iframe
<iframe src="" width="100%" height="500px" id="main_iframe"></iframe>
The jQuery to load page in iframe is working fine:
function site_load_1() {
$('#main_iframe').attr('src', "https://bing.com");
}
The jQuery to update iframe with custom html is not working:
function update_iframe() {
var myFrame = $("#main_iframe").contents().find('body');
var newContent = "<h1>hello</h1>";
myFrame.html(newContent);
}
However, it does work when the iframe is empty, as in, when page has not been loaded into it via the first button.

Replace document.write to place HTML content inside an iframe

I have a JavaScript script (no plugins, just pure JS) that creates an iframe element in the body of the page, and inside this iframe is placed a huge HTML to be displayed in this iframe.
This script uses document.write to write this content to the iframe, however, performance tools report that this procedure is too slow to load the page.
Below is my code:
var body = document.getElementsByTagName('body'),
iframe,
container;
container = document.createElement('div');
container.id = 'iframePlaceholder';
iframe = document.createElement('iframe');
iframe.id = 'myPageIframe';
iframe.name = 'page-content-frame';
iframe.allowfullscreen = true;
container.appendChild(iframe);
body[0].appendChild(container);
iframe = document.getElementById('myPageIframe');
iframe.contentWindow.document.open();
iframe.contentWindow.document.write('<html><body>content........<script src="..."></script></body></html>');
iframe.contentWindow.document.close();
What can I do to avoid using document.write without having to rewrite all my HTML in DOM?
Is it possible to convert this HTML string into a DOM element and add it to the iframe?
Edit:
The content loaded by the iframe is dynamic, so it is not possible to place an HTML file to be loaded by the iframe's SRC.
Perhaps you can try placing the HTML content inside a new file and add the name of the file to the src attribute of the iframe.
Something like the following:
<iframe id="myPageIframe" name="page-content-frame" src="newfile.html"></iframe>

How to execute a jQuery function on click of an anchor tag which is placed inside an Iframe

I have a web page in my application where I have an iframe loaded on the Page load.
The iframe displays a custom document which is created in our application. The iframe name is generated on the fly and the contents is loaded by a custom Javascript framework.
The document has two main vertical sections.
The first vertical section has page list which is displayed to the user so that user can navigate to nth page.
<iframe id="xyz15031550Iframe0" name="xyz15031550Iframe0" scrolling="no" src="/displaydocument/2339389/15031550?doc=100" style="height: 989px;" width="1277px" height="963px" frameborder="0">
<div class="containerFull">
<div class="allPages" id="allPages">
<a class="pagenumber_001" href="/document/2339389/15031550">Page 1</a>
<a class="pagenumber_002" href="/document/2339389/15031550">Page 2</a>
<a class="pagenumber_003" href="/document/2339389/15031550">Page 3</a>
</div>
<div id="pagesArea">
<div class="docPage" id="page_body_001">
<div id="docPageSection-001-1">
PAGE CONTENT
</div>
</div>
</div>
</div>
</iframe>
On page load, The iframe will be displaying the page 1.
By clicking the anchor tag, user can navigate to any page. On click of the anchor tag, the iframe is reloaded with the page details which is sent to back end.
Since some of the pages were bigger in width and user doesn't want the horizontal scroll to be present, I was adjusting the width of the iframe container and the two divs so to make them appear properly on the window.
`
<script src="adjust_doc_view.js"></script>
// the above script contains a jQuery function called updateView which basically
// has css related jQuery statements.
jQuery(window).on('load', function () {
setTimeout(updateView, 100); // timeout is used to wait for the iframe to load completely
});
`
The Issue which I am facing is the updateView is triggered only once on the page load. On all subsequent reload of Iframe, the updateView is not called. That is because I am not loading the whole page. I have other divs which are above the iframe which are constant. Let me know how to trigger updateView on every reload of iframe contents.
I tried adding the onclick function on anchor click event, but it works only once. I am not sure why.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
jQuery(window).on('load', function () {
// use setTimeout() to execute
// Setting the timeout to zero as no delay is experienced in this page.
setTimeout(updateView, 0);
jQuery("div[id^='artifactDiv']").find("iframe[id^='xyz']").contents().find("a[class^='pagenumber']").on('click', function() {
setTimeout(updateView, 1000);
});
jQuery("div[id^='artifactDiv']").find("iframe[id^='xyz']").contents().find("div[id^='docPageSection']").on('load', function() {
setTimeout(updateView, 1000);
});
});
Please help me out here. Please correct me if I am doing something wrong.
Thanks in advance.
How about adding the onload attribute to your iframe and calling updateView() from there?
<iframe onload="setTimeout(function() { updateView(); }, 1000);" id="xyz15031550Iframe0" name="xyz15031550Iframe0" scrolling="no" src="/displaydocument/2339389/15031550?doc=100" style="height: 989px;" width="1277px" height="963px" frameborder="0"></iframe>
You could use the ajaxComplete inside the iframe to trigger your update:
$(function() {
// iframe in main page
$('iframe').on('load', function() {
updateView()// first load update
// reference to window and document inside frame
var win = this.contentWindow || this,
doc = this.contentDocument || this.contentWindow.document;
// have to use iframe version of jQuery
win.$(doc).ajaxComplete(function(event, xhr, settings) {
// fires every time an ajax request completes in iframe
updateView()
});
});
});
DEMO

How do I run code inside an iFrame that was NOT defined in the iframe?

I need to run code as if it were running inside an iframe that is on the page, meaning that when I use window inside that code, it should use the iframe's window object. It is not an iframe I created, so my function is not defined inside it.
var myfunction = function () { // defined in parent, not in the iframe
console.log(window); // window here should be the iframe's window object, not the parent/
window.document.body.appendChild("Appending to iframe body");
}
// Need to somehow run this function inside the iframe
myfunction(); // as if I did this inside the iframe
I need this exact code to run inside the iframe, I know that I can use to fix this myself
frames["FrameName"].document.body.appendChild("Appending to iframe body");
but that won't fix my problem.
This is because I did not write the code myself, there is a module called Opentip that I use to create tool tips. I need to set a tooltip on an element inside the iframe; however, Opentip uses the window object in it's code to be able to create the tooltip properly.
So I need to run
Opentip(myelement, data);
as if I were running it inside the iframe, but without defining it inside the iframe.
So the Opentip function needs to use the iframe window, rather than the parent window.
The code provided is of course untested. This is answer is assuming:
OP circumstances are that the requirements of same origin policy are met.
OP cannot edit the child page directly.
OP cannot use Ajax.
Resources
Dyn-Web
Javascript injected into iframe of same origin not working
Injecting Javascript to Iframe
Snippet
//A//Ref to iframe
var iFrm = document.getElementById('iFrm')
//B//Listen for load event
iFrm.addEventListener('load', function(e) {
//C//Ref to iframe Window
var iWin = iFrm.contentWindow;
//D//Ref to iframe Document
var iDoc = iFrm.contentDocument? iFrm.contentDocument:iFrm.contentWindow.document;
//E//Ref element targeted by Opentip--replace {{>SEL<}} with appropriate selector
var iTgt = document.querySelector({{>SEL<}});
//F//Create, configure, deploy, and inject <script> tag to iframe <head>
var iNode = document.createElement(`script`);
iNode.src = "https://cdn.jsdelivr.net/opentip/2.4.6/opentip-native.min.js";
iDoc.head.appendChild(iNode);
//G//Call Opentip from iframe Window, and hopefully in iframe's context
iFrm.contentWindow.Opentip = function(iTgt, data);
}
/* Notes */
/*//F//Alternative to target iframe <head>:
window.frames["iFrm"].document.getElementsByTagName("head")[0];*/
/*//If not successful in accuirring iframe, try replacing all
"document." with "contentWindow", "contentDocument", or "contentWindow.document"*/
<iframe id="iFrm" name="iFrm" src="/"></iframe>
<!--Optionally you can add an onload event to the iframe itself
<iframe id="iFrm" name="iFrm" src="/"></iframe>
-->

jQuery set iFrame onLoad attribute

I need to trigger a function when the iframe loads a second time (the user clicks some link in the iframe). When the iframe page changes I can set the window location to the iframe src.
What I thought would be best is to set an onLoad attribute on the iframe element after the first load. I guess I would need the live event to tell when the iframe has been created, since it's dynamic.
This is what I had in mind:
$(document).ready(function() {
$('#tenant_login').fancybox({type:'iframe'});
$('#tenant_login').click(function() {
$('#fancybox-frame').attr('onload', function() {
window.location = $('#fancybox-iframe').attr('src');
});
});
});
If it matters the iframe is not cross domain.
$("#fancybox-iframe").load(function(){
window.location = $('#fancybox-iframe').attr('src');
});
This will allow you to redirect the parent window when the iframe loads a different page.
If you have control of the iframe content, as I did setting a target="_top" attribute on the hyperlink means the browser will open the link in the browser window rather than the iframe.
Main document:
<html>
<body>
<h1>The Main Page</h1>
<iframe src="myIframe.html" />
</body>
<html>
Iframe document:
<h2>The IFRAME</h2>
<a href="something.html" target="_top" >
This will open in the browser window rather than any iframe it exists in.
</a>
If you can't put target="_top" on the links of the iframe DOM you will need to capture the click events with javascript from the parent DOM.

Categories