I have an external script which I have included onto my website through a <script> tag. This external script injects a set of html into where that <script> tag is placed.
For instance, if I had that script that in #div1, the injected set of code will be appended directly into #div1.
<div id="div1">
<script src="http://url/to/script.js></script>
//injected html will appear in the dom here
</div>
<div id="preferredTarget">
</div>
However, I may prefer having my script tag in the head of the page.
<head>
<script src="http://url/to/script.js></script>
</head>
<div id="div1"></div>
<div id="preferredTarget">
//i want my injected html to appear here
</div>
Also, sometimes, if my target div was created at runtime, the external script cannot find that target div at the time it was loaded because the target div may not be ready yet.
Are there any methods in controlling the placeholder where an external script would inject its content into?
Related
I'm trying to run a script within a specific div only. With my current code, the script affects the image outside of the div as well. I'm using this code on wordpress within a html widget and when I insert the script code, it effects the entire page. I only want it to apply the specific html widget. This is also the reason I want to insert the script within a div, as I want to avoid adding the script to the actual web page (if possible).
Any help or work around would be greatly appreicated.
<html>
<head></head>
<body>
<div>
<script async defer data-pin-hover="true" data-pin-tall="true" src="//assets.pinterest.com/js/pinit.js">
</script>
<img src="https://i.imgur.com/I63emp4.jpg" height="160">
</div>
<img src="https://imgur.com/0VWBThm.jpg" height="160">
</body>
</html>
we have index.html in which second.html is included using iframe,
Now, as we see the iframe border in index.html
Requirement here is we need to write inline script in second.html, so that while rendering second.html in index.html, it'll remove iframe border.
we are not allowed to make any changes in that page where iframe included i.e. index.html
<div class="external">
<iframe src="/folder/second.html" width="100%" height="700"></iframe>
</div>
please suggest me the approach to remove iframe border using the file which is included in html using iframe
Sample Image:
Add this to your code
<iframe src="/folder/second.html" style="border:none;"height:700px;width:100%"><iframe>
Iframe is used to show other content in our web page. You can show videos,images and other web pages in Iframes.
You cannot make any changes in renderer for security reasons.
If that happened....then,
scripts, styles and all parts of both web pages will mix and will change design and functioning of both pages
You cannot change border of iframe from second.html. You should make changes in index.html:
<iframe style="border:0;"></iframe>
However you can make changes in some rendering pages of iframe
I am building an chrome extension where I am injecting my script.js file in all the iFrames of the web-page via content script file. Looping through all the iFrames in the web-page and injecting my script.js file in the head section.
My content script file contains following code:
var $iframe = $('#iframe');
$iframe.ready(function() {
$iframe.contents().find("head")
.append("<script src='chrome://ext3241241234/script.js'/>");
});
My script.js file contains following code:
var html = "<div id='cksBox'></div>"
$('body').append(html);
script.js simply insert a div element in the body. Thus I am expecting all iFrames' body will have this div element in the end.
But this is not happening. Instead of that my main/parent body element have this div element rather than inside iFrame body. Say following is web-page where my chrome extension is loaded:
<html>
<body>
<div id='cksBox'></div>
<iframe>
<html>
<head>
<script src='chrome://ext3241241234/script.js'/>
</head>
<body/>
</html>
<iframe>
</body>
I can see that my script.js file is loaded inside the iFrame. I tried debugging this, inside script.js file, when I query document, it returns document of parent/main html rather than of iFrame. I do not understand when my script.js file is executed its context should be of iframe but it is of document of main/parent web page.
Hope I am clear with my problem here.
Can someone help?
Please let me know if any more information is needed.
You should directly use script.js rather than chrome-extension prefix.
I currently am working on a large site with many different issues to contend with. One being that I have no easy way to include a script into my <head> without manually doing it for 500+ pages.
I have the possibility to include jQuery.min just inside the <body> tag from an include located there.
My question is, aside it not being a standard implementation, would there be any negative effects from not loading jQuery within the <head> tag? Will all the functions be available?
I am aware that if I do this, I will not be able to call jQuery from within the <head> or before this include... that's okay.
example:
<head>
Standard Head Stuff
</head>
<body>
<div>Some Content</div>
<!-- My Include is roughly here -->
<script type="text/javascript" src="jquery.min.js"></script>
<div>More content</div>
<script type="text/javascript">
$(document).ready(function(){
// Put my jQuery commands here
});
</script>
</body>
The only issue is that a page is loaded from top to bottom and so if you were to place the include statement into the header than you would be assured that the library would be loaded immediately. Otherwise the library may only be loaded at a later time which can cause a delay in some effects potentially.
Head or body, inline code will execute when phrased. Code is generally placed in the head so external libraries can be loaded before the page is (so effects can be run on dom ready). Code in the body will be run once the dom is done with the header code, and done loading page elements (once in the body, elements are loaded from top to bottom). So any code in the body will be executed once the page had loaded (up to that point)
The following external CSS files were
included after an external JavaScript
file in the document head. To ensure
CSS files are downloaded in parallel,
always include external CSS before
external JavaScript. 1 inline script
block was found in the head between an
external CSS file and another
resource. To allow parallel
downloading, move the inline script
before the external CSS file, or after
the next resource.
My HTML is:
<head>
<link rel="Stylesheet" href="gStyle.css" />
<script type="text/javascript" src="gMain.js"></script>
<script type="text/javascript" language="javascript">
// Your chart object(s)
var myChart;
// Function to hold all chart creation
function initCharts() {
myChart = new ganttChart("chart1");
myChart.gAddBar("Dynamic!", "22/3/2010", "3/4/2010");
myChart.gLoadData("Going to the shop*4/3/2010*19/3/2010*Watching TV*9/3/2010*23/3/2010*Watching TV*1/3/2010*23/3/2010*Watching TV*18/3/2010*28/3/2010*END INPUT*1/3/2010*9/3/2010");
myChart.gDraw();
myChart.gChangeBarColour(1, "#dd2200");
myChart.gChangeBarColour(2, "#9900ee");
myChart.gChangeBarColour(3, "#00dd00");
myChart.gChangeBarColour(4, "#ffbb00");
myChart.gChangeBarColour(5, "#00aa99");
}
</script>
</head>
<body onload="initCharts()">
<div id="chart1" class="gContainer">
</div>
<div id="db"></div>
</body>
Is it getting confused between the body inline script?
Inspect the page elements. Probably your Chrome extensions are dynamically adding scripts to the page in HEAD.
I think that when javascript is downloaded the browser must wait to get it all and then run it - this stops it going to the next line directly and getting it. I guess styles all get downloaded and then computed down to inheritance position and importance etc...so they can download in parallel.
This kind of thing is hard to regulate in a CMS with components that load their own style and js.
For me, Google Analytics library inserted scripts before the rest of mine.