render partial view inside an iframe within asp.net mvc application - javascript

I have a asp.net mvc application in which I have a partial view named _GeoApi.cshtml.
I need to render it inside an iframe.
<iframe src='#{Html.RenderPartial("_GeoApi");}' id='fram' ></iframe>
I get a generated html code :
<iframe<script src="/Scripts/External js/jquery-1.8.2.js">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCVSBoBAUjAfb-Pfx_qq0ZKUHCitbzsl4&libraries=places&callback=initAutocomplete" async="" defer=""></script>
//content removed for brivety
src='' id='fram' />
</iframe<script>
So I need to know
What are the reasons of this error?
How can I fix my code?

Error is caused because you have a <script> tag in your <iframe> tag.
The solution is to simply provide a URL as the src to a URL where you would render the partial instead of trying to put the contents in the iframe tag.
<iframe src='/api/geoApi' id='fram' ></iframe>
Then create an ApiController that has a GeoApi action method which renders the "_GeoApi" partial view.

Related

Cannot add JavaScript code into existing iFrame using jQuery

I tried some ways to be able to interact with the iframe but cannot add js to iframe
My code use iframe with the source:
<div class='roomle-configurator--wrapper'>
<iframe id="frRoomle" src="https://www.roomle.com/t/cp/?configuratorId=delife&id=delife:product_test_1&api=false" width="1024" height="768"></iframe>
</div>
I use the below code but it doesn't work, I think the issue is caused blocking by src https://www.roomle.com
var script = "alert('hello world');";
$('#frRoomle').contents().find('body').append($('<script>').html(script))

How to load jQuery inside frame?

I am working on a legacy enterprise application whose code was written in 2001 using a combination of JavaScript, HTML, Intersystems Caché, and Caché Weblink.
This is what exists in index.html for the web app:
<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="32,*" FRAMEBORDER="no" border="0" framespacing="0">
<FRAME
SRC="sysnav.html"
NAME="sysnav"
SCROLLING="no"
MARGINHEIGHT="10"
MARGINWIDTH="10"
NORESIZE>
<FRAME
SRC="cgi-bin/nph-mgwcgi?MGWLPN=dev&wlapp=SYSTEM&SystemAction=DisplayContentFrame"
NAME="content"
SCROLLING="auto"
MARGINHEIGHT="0"
MARGINWIDTH="10">
</FRAMESET>
<noframes>
</noframes>
</HTML>
The problem that I have is that in the content frame, the HTML for that frame is automatically generated every single time, but I need to include jQuery in the frame.
Is there any hack/workaround I can do to shove jQuery into the content frame?
As was alluded to in comments, jQuery could be injected into the frame as long as the frame is on the same domain.
Vanilla Javascript
A script tag like the one below could be added to the <head> element of index.html. It waits until the content frame has been loaded via addEventListener() and then dynamically adds a <script> tag with the src attribute pointing to the jQuery code hosted by the Google Hosted Libraries.
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
frames['content'].addEventListener('load', function() {
var contentFrameHead = frames["content"].document.getElementsByTagName("head")[0];
var newScriptTag = document.createElement('script');
newScriptTag.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js';
contentFrameHead.appendChild(newScriptTag);
});
});
</script>
See it demonstrated in this plunker example. Try clicking the button labeled Test jQuery Loaded in this frame? and see how the result changes when commenting line 10 of index.html.
Utilizing jQuery in index.html
Maybe it would be too much overhead, but if jQuery was added to index.html, jQuery helper functions could be used. I attempted to utilize those to shorten the code but ran into an issue while attempting to create the script tag using $() - refer to this answer for a detailed explanation of why that won't work.
So the code utilizing jQuery helper functions isn't much shorter...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
<script type="text/javascript">
$(function() { //DOM-ready
$(frames['content']).on('load', function() { //load for content frame
var newScriptTag = document.createElement('script');
newScriptTag.src = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js';
var contentFrameHead = frames["content"].document.getElementsByTagName("head")[0];
contentFrameHead.appendChild(newScriptTag);
});
});
If content frame has a different domain
Otherwise, if the domain of the content frame is a different domain than that of index.html, then a server-side script (e.g. using PHP with cURL, nodeJS, etc.) might be necessary to fetch the content of that page and include the jQuery library (which itself might be cumbersome).
No, but you can create a new page and include that in the src. Yes it is ugly, but it could work in some cases.
include jquery in the new page, and include the old page in the new page.

Inserting GTM variable instead of HTML object

I'm trying to implement a marketing tag on a website where the value needed on the tag should come from an HTML object, although when trying to replace this with a GTM variable, no data is transferred into the tag.
These are the instructions from their documentation:
For Google Tag Manager (GTM) integration, create a HTML-object (jQuery
is required) containing and replace all variables with their real
DATA values (cf. next section).
HTML-Object at your checkout page
<div id='transactionString' data-transaction-string='DATA'></div>
Create a custom HTML-Tag in GTM with the following code snippet and
pass the data from the new HTML object. Finally, you can add your
checkout page to the trigger rules of GTM.
Create custom HTML tag in GTM
<script src="https://tracking.crealytics.com/lib/multi_conversion.min.js"></script>
<script type="text/javascript"> var transactionString =
$("#transactionString").data("transaction-string");
__multi_conversion_tracking(70, "transactionString");
</script> <noscript> <div style="display:inline;">
<img> src="https://tracking.crealytics.com/70/multi_check.php?data=transactionString">
</div> </noscript>
Everything is ready in the dataLayer, the formatting and the values are all correct, but the only problem is when I pass these values into the variable of GTM.
This is the custom HTML tag I set in GTM:
<script type="text/javascript"> var transactionString =
$({{VariableInGTM}}).data("transaction-string");
__multi_conversion_tracking(70, "transactionString");
</script> <noscript> <div style="display:inline;">
<img> src="https://tracking.crealytics.com/70/multi_check.php?data=transactionString">
</div> </noscript>
So in short, I replaced
"#transactionString"
for
{{VariableInGTM}}
EDIT:
var divElement = document.createElement("Div");
divElement.id = "transactionString";
divElement.setAttribute('data-transaction-string', products_info);

loading html code with html

I want javascript to load a html code so it can be embedded in a page, all I get is the raw html code without being compiled.
<script>
document.write('http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html')
</script>
It contains the html coding inside and I want it to embed in pages so I can share with other websites.
Are you trying to get the HTML from that URL and embed it in the page? JavaScript can't do that for security reasons, but if you're using PHP server-side you can use:
echo file_get_contents("http://..........");
Or you can use an iframe:
<iframe src="http://........" />
The easiest way to make this work, sort of, is by using <iframe>:
<iframe src="http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html"></iframe>
If you want to load it inside a particular container, you have to perform a web request using JavaScript; jQuery example:
<div id="container"></div>
<script>
$('#container').load('http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html');
</script>
If the remote URL is not in the same domain, you need to use a proxy:
<script>
$('#container').load('/path/to/myproxy.php', {
url: 'http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html'
});
</script>
Then your PHP code could look like:
<?php
if (parse_url($_POST['url'], PHP_URL_HOST) === 'www.example.com') {
echo file_get_contents($_POST['url']);
}
document.write - adds text to the document - it does not fetch documents from the web.
However, you can use the object tag.
It should look something like that:
<object type="text/html" data="http://www.example.com/index.php?title=Media:Object4&action=raw&ctype=html" style="width:100%; height:100%"></object>
Additionally, if the page that you are fetching is on the same domain, you can use AJAX to fetch it.

Open iframe page in parent frame (javascript)

I'm sure someone in the know has a solution to this problem I'm facing? I have a site with Index.html which contains an Iframe. In this iframe, all pages of the site are shown...Home.html..Info.html...Contact.html..etc.
I'd like a javascript function so that when you open Home.html via the google sitemap for example, it shows up in the parent frame in Index.html. The function I currently have in the head section of each child page is:
<script>
if (parent.location.href == self.location.href){
window.location.href = 'index.html'
}
</script>
Although this works, it doesn't remember the child page and opens the Index page with the default iframe page...Home.html as the iframe is coded like this:
<iframe id="iframe" src="home.html" allowTransparency="true" id="iframeID" name="iframeID" width="100" height="100" scrolling="no" frameborder="no">
</iframe>
Has anybody a solution to this problem, as I've searched everywhere? Thanks.
Try to set location.href with a query string, i.e.:
// .getAttribute so we don't get the absolute URL
var src = document.getElementById("iframe").getAttribute("src");
if (parent.location.href === self.location.href)
location.href = "index.html?" + escape(src);
In index.html create a check for query strings and set the iframe source accordingly:
if (location.search)
document.getElementById("iframe").src =
unescape(location.search.substring(1));

Categories

Resources